React HOC道具的Typescript接口

时间:2019-04-27 22:21:40

标签: reactjs typescript

给出以下将排序状态添加到组件的React HOC:

0   0   0   0   0   0   0
0   2   1   0   0   0   0
1   0   1   0   0   0   0
0   1   1   0   0   0   0
0   0   0   0   0   0   0
0   0   0   0   0   0   0
0   0   0   0   0   0   0
0   0   0   0   0   0   0
0   0   0   0   0   0   0
0   0   0   0   0   0   0

当我手动将状态属性 import React, {Component, ComponentClass, ComponentType} from 'react' interface WithSortState { sortOrder: string } interface WithSortInjectedProps { sortOrder: string onSort: (event: React.ChangeEvent<HTMLSelectElement>) => void } const withSort = () => (WrappedComponent: ComponentType<WithSortInjectedProps>): ComponentClass<WithSortInjectedProps> => { class WithSort extends Component<WithSortInjectedProps, WithSortState> { state = { sortOrder: 'created_at_desc' }; handleSort = (sortEvent: React.ChangeEvent<HTMLSelectElement>) => { this.setState({ sortOrder: sortEvent.target.value }) }; render() { ` return ( <WrappedComponent sortOrder={this.state.sortOrder} onSort={this.handleSort} {...this.props} /> ) } } return WithSort }; export default withSort 设置为'123'时,编译器会抱怨sortOrder是一个字符串。但是,如果我对sortOrder上的sortOrder执行相同的操作,则编译器不会引发任何错误。例如,即使接口指示该属性应为字符串,WrappedComponent也会编译。

为什么会这样?我在Typescript方面做错了吗?

1 个答案:

答案 0 :(得分:1)

如果您尝试在WrappedComponent上使用sortOrder = {123},它应该会失败,原因不是这样,因为您已经传播了道具sortOrder={123}并且道具不能是Partial Mean Typescript很聪明,sortOrder={this.props.sortOrder}只会被for record in data: (product_id, name, price) = record 覆盖

希望这会有所帮助。 TL; DR删除{... this.props},所有内容都会显示