为什么react组件要定义默认状态

Question

问题描述

想问一下大家，为什么react组件会要定义defaultProps,displayName,如果不定义，会有什么错误么？

问题出现的环境背景及自己尝试过哪些方法

试了一下，发现不会有什么问题

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

Component.displayName = 'CreateUser';

Component.defaultProps = {
className: 'createUser',
};

你期待的结果是什么？实际看到的错误信息又是什么？

希望各位帮忙解答

Answer 1

React中defaultProps不是默认状态，是默认属性。写个简单的例子：

class Title extends React.Component{
  render(){
    const { title, color } = this.props;
    return(
      <div>
        <h3 style={{ color: color }}>
          {title}
        </h3>
      </div>
    );
  };
};
Title.defaultProps = {
  color: '#666',
  title: '默认标题',
};

ReactDOM.render(
  <Title />,
  document.getElementById('root')
);

默认属性的作用就是在你调用组件又没有传入相应的属性值时，也会有一个默认值。不定义也不会报错，不过在调用组件时最好把需要的属性值都传入，不然可能会出错。

Answer 2

我只是来补充的而已。

新版本的babel因有支持 transform-class-properties 可以转换，所以语法上会改成加上 static 来定义，下面是官方的文档的示例代码：

class Greeting extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
    return (
      <div>Hello, {this.props.name}</div>
    )
  }
}

不过要注意的，就是在函数型组件(无状态组件)， defaultProps 会宣告在函数外面，而不是用函数的预设传参的语法。(原因当然就是你虽然是把组件用函数来撰写，但实际运作你把它不会当作函数来调用，而是让react用组件的方式去调用它)

第二要注意的是，因版本15.5之后，PropTypes已移出主库外，独立成 prop-types 套件，你要使用 defaultProps 时通常会配上PropTypes 来检查属性类是否正确，所以要再安装导入到代码中。

官方会建议使用新的作法，例如Flow或TypeScript。例如Flow它会要求要用static的方式来定义，详情参考文档：

https://flow.org/en/docs/reac...

官方文档：
https://reactjs.org/docs/type...