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

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

Ss Yy2020/03/11 20:46:12

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

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

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};

猿阿飞Tom2020/03/11 20:46:12

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

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

不知2020/03/11 20:46:12

您还可以使用解构分配。

class AddAddressComponent extends React.Component {
  render() {

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

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer