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

reactjs React.js

SamGreen

2020-03-11

我使用下面的代码在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,
}

第822篇《如何在React组件上设置组件默认道具》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Ss Yy 2020.03.11

对于功能类型prop，可以使用以下代码：

AddAddressComponent.defaultProps = {
    callBackHandler: () => {}
};

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};
猿阿飞Tom 2020.03.11

如果您使用的是功能组件，则可以在解构分配中定义默认值，如下所示：

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};
不知 2020.03.11

您还可以使用解构分配。

class AddAddressComponent extends React.Component {
  render() {

    const {
      province="insertDefaultValueHere1",
      city="insertDefaultValueHere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

我喜欢这种方法，因为您不需要编写太多代码。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android