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

Answer 1

您忘了关闭Class括号。

＆＃13;

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')
)

＆＃13;

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

＆＃13;

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包（link）：

import PropTypes from 'prop-types';

修改

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

Answer 3

首先，您需要将您的班级与其他扩展名分开，但不能在AddAddressComponent.defaultProps内扩展class而是将其移到外面。

我还建议您阅读Constructor和React的生命周期：请参阅Component Specs and Lifecycle

这是你想要的：

import PropTypes from 'prop-types';

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

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

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

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

export default AddAddressComponent;

Answer 4

您也可以使用解构分配。

 onClick={() => this.onButtonClick}

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

Answer 5

使用静态defaultProps，如：

export default class AddAddressComponent extends Component {
    static defaultProps = {
        provinceList: [],
        cityList: []
    }

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

取自： https://github.com/facebook/react-native/issues/1772

如果您想查看类型，请参阅treyhakanson或Ilan Hasanov的答案中如何使用PropTypes，或查看上述链接中的许多答案。

Answer 6

您可以使用类名设置默认道具，如下所示。

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

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

您可以使用此link中的React推荐方式获取更多信息

Answer 7

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

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

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

Answer 8

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

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

Answer 9

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

Example.defaultProps = { text: 'yo' };

如何在React组件

9 个答案: