jtwang7 / React-Note

React 学习笔记
8 stars 2 forks source link

React - 类组件 defaultProps #24

Open jtwang7 opened 3 years ago

jtwang7 commented 3 years ago

React - 类组件 defaultProps

参考: *React 官方文档 - 默认 Prop 值


函数组件中定义 props 的默认值很好理解,只要你熟悉 js, es6 的一些知识就能完全掌握。 而类组件中,props 默认值则是定义在类的静态属性上面,且这个静态属性只能是 defaultProps (是 React 内部规定的,不能随便取名)

形式一:外部定义类静态属性

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// 指定 props 的默认值:
Greeting.defaultProps = {
  name: 'Stranger'
};

形式二:内部定义类静态属性

class Greeting extends React.Component {
  // 类静态属性定义:js 类的一个新语法提案,此语法提案还没有最终确定,需要进行编译后才能在浏览器中运行。
  static defaultProps = {
    name: 'stranger'
  }

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