给出以下将排序状态添加到组件的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方面做错了吗?
答案 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},所有内容都会显示