Reactjs 如何使用TypeScript在React组件类上声明defaultProps？

有人能举一个在TypeScript中的React组件类上定义

defaultProps

的例子吗

接口IProps{}
界面IState{}
类SomeComponent扩展组件{
//…道具？
//public defaultProps:IProps={}；//此语句产生错误
建造师（道具：IProps）{
超级（道具）；
}
// ...
}

您可以通过以下方式定义默认道具：

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.tick = this.tick.bind(this);
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

导出类计数器扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={count:props.initialCount}；
this.tick=this.tick.bind（this）；
}
勾选（）{
this.setState（{count:this.state.count+1}）；
}
render（）{
返回(
单击：{this.state.count}
);
}
}
Counter.propTypes={initialCount:React.propTypes.number}；
Counter.defaultProps={initialCount:0}；

这在TypeScript中相当于将defaultProps定义为类主体内的静态字段：

class SomeComponent extends Component<IProps, IStates> {
    public static defaultProps: IProps = { /* ... */ }; 
    // ...
}

class SomeComponent扩展组件{
公共静态defaultProps:IProps={/*…*/}；
// ...
}

假设您有一个无状态电影组件，那么您可以像下面这样定义proptype：

const Movie = props => {
    return (
       <div>
         <h3>{props.movie.title}</h3>
       </div>
    );
 };

Movie.propTypes = {
  movie: PropTypes.shape({
     title: PropTypes.string.isRequired
  })
};

Movie. defaultProps = {
  movie: PropTypes.shape({})
};

const Movie=props=>{
返回(
{道具.电影.标题}
);
};
Movie.propTypes={
电影：PropTypes.shape({
标题：PropTypes.string.isRequired
})
};
电影。defaultProps={
电影：PropTypes.shape（{}）
};

对于类组件，您可以这样做，也可以使用与上面相同的模式：

export default class Movie extends React.Component {
  static propTypes = {
  movie: PropTypes.shape({
  title: PropTypes.string.isRequired
  }),
  desc: PropTypes.string
};

 static defaultProps = {
  desc: 'No movie is available'
 };

render() {
  return (
     <div>
        <h3>{this.props.movie.title}</h3>
        <h3>{this.props.movie.desc}</h3>
     </div>
    );
 }
}

导出默认类Movie.Component{
静态类型={
电影：PropTypes.shape({
标题：PropTypes.string.isRequired
}),
desc:PropTypes.string
};
静态defaultProps={
描述：“没有可用的电影”
};
render（）{
返回(
{this.props.movie.title}
{this.props.movie.desc}
);
}
}

我使用if语句检查道具的值是否未定义，如果未定义，则设置默认值，否则使用传递的值

interface Props {
  style: any;
  bounces?: boolean | undefined;
  extraHeight?: number | undefined;
}

const DynamicView: React.FC<Props> = (props) => {
  return (
    <KeyboardAwareScrollView
      style={props.style}
      bounces={
        (props.bounces = props.bounces === undefined ? false : props.bounces)
      }
      extraHeight={
        (props.extraHeight =
          props.extraHeight === undefined ? 15 : props.extraHeight)
      }>
      {props.children}
    </KeyboardAwareScrollView>
  );
};

export default DynamicView;

界面道具{
风格：任意；
反弹？：布尔值|未定义；
超高？：编号|未定义；
}
常量DynamicView:React.FC=（道具）=>{
返回(
{props.children}
);
};
导出默认动态视图；

要使用TypeScript，您应该通过在分号前添加'as IProps'将对象强制转换为IProps。提供的链接不再讨论

defaultProps

。取而代之的是感谢@WoodenKitty，我们已经试着在上面查找文档了一段时间。谷歌没有帮助FWIW-Airbnb的stlyeguide也遵循这种模式。这似乎不起作用。。。如果我从

jsx

提交一个项目，它将抛出一个异常。如果我将其设置为可选的“标题”，则会起作用：字符串；`。。。这就是应该发生的事情吗？你是说

Movie.defaultProps={

（带一个“s”）？typescript在哪里？