Question

我有一个场景，我想为可选道具设置defaultProps：

interface IAppProps {
  requiredProp : string; //should always be passed into component
  optionalProp?: string;
}

export class App extends React.Component<IAppProps, {}>{
    public static defaultProps: IAppProps = {
        optionalProp: 'set from defaultProps!'
    };

    public render(){
      return <div>{this.props.requiredProp} - {this.props.optionalProp}</div>
    }
}
ReactDOM.render(<App requiredProp="Hello world" />, document.getElementById('app'))

但是，这会引发错误，因为当我创建defaultProps时，它不包含requiredProp：

输入＆＃39; {optionalProp：string; }＆＃39;不能分配给类型＆＃39; IAppProps＆＃39;。物业＆＃39; requiredProp＆＃39;类型＆＃39; {optionalProp：string; }＆＃39;

这样做的标准方法是什么？我只是将null或undefined传递到所需的道具吗？

Answer 1

在这种情况下，我将它们分开，就像那样

interface interface IAppOptionalProps {
  optionalProp?: string;
}

interface IAppProps extends IAppOptionalProps {
  requiredProp: string;
}

然后让您的defaultProps类型为IAppOptionalProps

public static defaultProps: IAppOptionalProps = {
  optionalProp: 'set from defaultProps!'
};

当您考虑它时，defaultProps不是IAppProps且不应属于这种类型，而是如上所述，而不是IAppOptionalProps类型。

如何＆＃39; defaultProps＆＃39;什么时候需要一些字段？

1 个答案: