假设我有这个
interface IProps {
text: string
}
class TextComponent extends PureComponent<IProps> {
render() {
return (
<Text>{this.props.text}</Text>
)
}
}
function mapStateToProps(state: ITextComponentReduxStore) {
return {
text: state.text,
}
}
function dispatchAction(dispatch: (x: any) => any) {
return {
}
}
export default connect(mapStateToProps, dispatchAction)(TextComponent)
当我想使用此组件时,我只需
<TextComponent />
^^^^^^^^^^^^^^^^^ <- Webstorm underlines this
Webstorm(TSLint)抱怨
TS2741: Property 'text' is missing in type '{}' but required in type 'Readonly<Pick<IProps, "text">>'.
如何防止这种情况?
道具是Redux商店的一部分
答案 0 :(得分:1)
您根据需要定义道具
interface IProps {
text: string
}
因此您需要使用组件
<TextComponent text={“...”}/>
或者您将其定义为可选
interface IProps {
text?: string
}
因此您可以将其用作
<TextComponent/>
如果要将复杂对象作为道具传递
interface IProps {
data?: ProfileData[];
}
和ProfileData接口
interface ProfileData {
name: string;
age: number;
photos: string[];
}
您就可以使用您的组件
<TextComponent data={[{name:”John”, age:26, photos:[“url1”,”url2”]}]}/>
或者如果您不想定义特定类型,则可以将其定义为any
interface IProps {
data?: any;
}
但这不是打字稿的好选择。