javascript - 输入 Prop 不适用于纯函数组件？

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” Prop ，例如:

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

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

(40,19): Property 'stashBarWidth' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly<{ c...'.

Answer 1

您尚未在纯组件上定义 Prop ，您只是断言它将在参数中接收的 Prop (不是同一件事)。这就好像你制作了一个常规的 React 组件，但没有像 class X extends React.Component<MyProps> 这样将 props 传递给泛型组件。相反，你做了 const props: MyProps = this.props;在你的渲染方法中。

试试这个:

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