Question

我有一个组件-'App.tsx'，其道具具有类型定义。道具包括待办事项数组和将由connect（react-redux）注入的动作创建者。但是，如果不通过这些必需的道具，就无法在“ index.tsx”中连接组件“ App”。是否可以在界面中将这些道具指定为可选道具？如果它们是可选的，那么我必须在访问它们的所有地方进行空检查。

我在其他文档中通读了使用redux和typescript的信息，但没有找到答案。

index.tsx =>

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

上面的代码有错误，因为下面的App组件需要两个参数-'todos'和'fetchTodos'

App.tsx =>

interface AppProps {
    todos: Todo[];
    fetchTodos(): any;
}

class _App extends Component<AppProps> {

    onButtonClick = (): void => {
        this.props.fetchTodos();
    }
    renderList(): JSX.Element[] | undefined {
        return this.props.todos.map((todo: Todo) => {
            return (
                <div key={todo.id}>{todo.title}</div>
            );
        });
    }
    render(): JSX.Element {
        return (
            <>
                <button onClick={this.onButtonClick}>Fetch</button>
                {this.renderList()}
            </>
        );
    }
}

const mapStateToProps = ({ todos }: StoreState, ownProps: AppProps): { todos: Todo[]; } => {
    return {
        todos
    };
};

export const App = connect(mapStateToProps, { fetchTodos })(_App);

我想看看是否有一种方法可以在AppProps接口中不将这两个道具指定为可选道具，因为它们肯定会由connect注入。

Answer 1

就像其他任何TypeScript接口（或函数参数或类成员）一样，您可以使用?标志声明可选类型：

interface AppProps {
    todos?: Todo[];
    fetchTodos()?: any;
}

您可以在docs中了解有关可选参数和成员的更多信息。

以后的修改： 所以您想排除映射的道具吗？

通常，我以这种方式声明我的道具类型，我创建了两个道具接口（一个用于映射道具，一个用于我希望传递的道具）：

interface IOwnProps {
    fetchTodos(): any;
}

interface IPropsFromState {
    todos: Todo[];
}

type IProps = IOwnProps & IPropsFromState;

const mapStateToProps = (state: IRootState): IPropsFromState ({
   todos: state.todos  
});

class _App extends Component<IProps> {
 ...
}

export const App = connect(mapStateToProps)(_App);

Answer 2

您必须了解connect如何使类型杂乱无章。

从右向左看时，

Connect是最好的解释：

您的组件接受2个道具：todos，fetchTodos。

然后查看mapDispatchToProps。您为此付出的努力提供了fetchTodos。新的道具列表为：todos

最后看mapStateToProps：它提供了todos，但是要执行该功能，它需要一个包含以下内容的对象：todos，fetchTodos

您的最终组件包含以下道具：todos，fetchTodos

这不是您想要的，您不需要道具。

您需要调整mapStateToProps功能：

const mapStateToProps = ({ todos }: StoreState, ownProps: {}): { todos: Todo[]; } => { return { todos };

或者简单地：

const mapStateToProps = ({ todos }: StoreState): { todos: Todo[]; } => { return { todos };

Answer 3

这是我解决以上问题的方法：

//this is the class which creates the stage
class HUD {
    val  stage = Stage(ScreenViewport())
    constructor(){


    }
     //stage create method
    fun create(){
        Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), 
        Gdx.graphics.getHeight())
        stage.getViewport().update(Gdx.graphics.getWidth(), 
        Gdx.graphics.getHeight(), true);
        Gdx.input.setInputProcessor(stage);

    }
    //stage render method
    fun render() {
        val delta = Gdx.graphics.deltaTime
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT)
        stage.act(delta)
        stage.draw()
    }
    //stage disposed method
    fun dispose() {
        stage.dispose()
    }
}




//inside other AppCOmpatActivity file 
 val hud : HUD = HUD()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.uno_main)

//        val hud : HUD = HUD()
        hud.create()
        hud.render()
        hud.dispose()
    }


    java.lang.UnsatisfiedLinkError: No implementation found for 
    java.nio.ByteBuffer com.badlogic.gdx.utils.BufferUtils.newDisposableByteBuffer(int) (tried Java_com_badlogic_gdx_utils_BufferUtils_newDisposableByteBuffer and Java_com_badlogic_gdx_utils_BufferUtils_newDisposableByteBuffer__I)
        at com.badlogic.gdx.utils.BufferUtils.newDisposableByteBuffer(Native Method)
        at com.badlogic.gdx.utils.BufferUtils.newUnsafeByteBuffer(BufferUtils.java:517)
        at com.badlogic.gdx.graphics.glutils.VertexArray.<init>(VertexArray.java:57)
        at com.badlogic.gdx.graphics.glutils.VertexArray.<init>(VertexArray.java:48)
        at com.badlogic.gdx.graphics.Mesh.<init>(Mesh.java:171)
        at com.badlogic.gdx.graphics.g2d.SpriteBatch.<init>(SpriteBatch.java:101)
        at com.badlogic.gdx.graphics.g2d.SpriteBatch.<init>(SpriteBatch.java:78)
        at com.badlogic.gdx.scenes.scene2d.Stage.<init>(Stage.java:99)

使用类型化的道具布线组件

3 个答案: