Question

我有以下内容：

const actionCreators = {
    action: AppReducer.actionCreators.action
}
interface GlobalState {
    user: Model.User | null;
}

interface InputState {
    setStashBarWidth(width: number);
    stashWidth: number;
}


const Header = (props: (GlobalState & InputState & typeof actionCreators)) => { ... }

const mapStateToProps = (state: RootState): GlobalState => {
    return {
        user: state.app.user
    };
};

export default connect(mapStateToProps, actionCreators)(Header);

我的意图是制作可以传递到标头中的“ InputState”道具，例如：

<Header setStashBarWidth={(number)=>{}} stashWidth={3} />

但是似乎输入道具没有被识别，我无法将任何内容传递给setStashBarWidth或stashWidth，因为它们未被识别：

（40,19）：类型上不存在属性'stashBarWidth' “ IntrinsicAttributes＆IntrinsicClassAttributes>和只读<{c ...”。

Answer 1

您尚未在纯组件上定义props，只是断言了它将在参数中接收的props（不是同一件事）。就像您制作了常规的React组件一样，而不是像将class X extends React.Component<MyProps>那样将props传递给泛型时，您却在渲染方法中做了const props: MyProps = this.props;。

尝试一下：

const Header: React.SFC<GlobalState & InputState & typeof actionCreators> = (props) => { ... }

输入道具在纯功能组件上不起作用？

1 个答案: