如何在 React 组件上设置组件默认道具

Question

我使用下面的代码在 React 组件上设置默认道具，但它不起作用。在 render() 方法中，我可以看到输出“未定义的道具”打印在浏览器控制台上。如何为组件道具定义默认值？

 export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

原文由 Joey Yi Zhao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您忘记关闭 Class 括号。

 class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: React.PropTypes.array.isRequired,
  provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

原文由 Serhii Baraniuk 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于那些使用类似 babel stage-2 或 transform-class-properties 的人：

 import React, { PropTypes, Component } from 'react';

export default class ExampleComponent extends Component {
   static contextTypes = {
      // some context types
   };

   static propTypes = {
      prop1: PropTypes.object
   };

   static defaultProps = {
      prop1: { foobar: 'foobar' }
   };

   ...

}

---

更新

从 React v15.5 开始， PropTypes 被移出了主要的 React 包（ 链接）：

 import PropTypes from 'prop-types';

编辑

正如@johndodo 所指出的， static 类属性实际上不是 ES7 规范的一部分，而是目前仅由 babel 支持。更新以反映这一点。

原文由 treyhakanson 发布，翻译遵循 CC BY-SA 4.0 许可协议