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

发布时间：2020-12-15 20:53:43 所属栏目：百科来源：网络整理

导读：我使用下面的代码在React组件上设置默认道具,但它不起作用.在render()方法中,我可以看到输出“undefined props”已经打印在浏览器控制台上.如何为组件道具定义默认值？ export default class AddAddressComponent extends Component {render() { let {provin

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

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,}

你忘了关闭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: [],};

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" />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!