Входные реквизиты не работают на чистом компоненте функции?

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> & Readonly <{c ...'. </p>

Answer 1

Вы не определили реквизиты в своем чистом компоненте, вы просто заявили реквизиты, которые он получит в аргументе (не то же самое). Это как если бы вы сделали обычный компонент React, но вместо того, чтобы передавать реквизиты в общий тип, например, class X extends React.Component<MyProps> вы вместо этого сделали const props: MyProps = this.props; в вашем методе рендеринга.

Попробуйте это:

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