javascript - 输入 Prop 在纯功能组件上不起作用？

我有以下几点：

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>＆Readonly

最佳答案

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

尝试这个：

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