如何在 React 組件上設置組件默認道具

Question

我使用下面的代碼在 React 組件上設置默認道具，但它不起作用。 在render()方法中，我可以看到輸出“undefined props”被打印在瀏覽器控制台上。 如何為組件 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,
}

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

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 支持。 更新以反映這一點。

Answer 3

首先，您需要將您的類與進一步的擴展分開，例如您不能在class擴展AddAddressComponent.defaultProps而將其移到外部。

我還將建議您閱讀有關構造函數和 React 生命周期的信息：請參閱組件規范和生命周期

這是你想要的：

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

您還可以使用解構賦值。

class AddAddressComponent extends React.Component {
  render() {

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

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

我喜歡這種方法，因為您不需要編寫太多代碼。

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'
};

您可以通過此鏈接使用 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' };