Question

假设我有这个

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商店的一部分

Answer 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;
}

但这不是打字稿的好选择。

TSlint无法正确处理React Native Redux组件

1 个答案: