宣告預設道具和 PropTypes

我們如何使用和宣告預設道具及其型別有重大變化。

React.createClass

在這個版本中,propTypes 屬性是一個 Object,我們可以在其中宣告每個 prop 的型別。getDefaultProps 屬性是一個返回 Object 以建立初始道具的函式。

import React from 'react';

const MyComponent = React.createClass({
  propTypes: {
    name: React.PropTypes.string,
    position: React.PropTypes.number
  },
  getDefaultProps() {
    return {
      name: 'Home',
      position: 1
    };
  },
  render() {
    return (
      <div></div>
    );
  }
});

export default MyComponent;

React.Component

此版本使用 propTypes 作為實際 MyComponent 類的屬性,而不是屬性作為 createClass 定義物件的一部分。

getDefaultProps 現在已經改變為類名為 defaultProps 的 Object 屬性,因為它不再是 get 函式,它只是一個 Object。它避免了更多的 React 樣板,這只是簡單的 JavaScript。

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}
MyComponent.propTypes = {
  name: React.PropTypes.string,
  position: React.PropTypes.number
};
MyComponent.defaultProps = {
  name: 'Home',
  position: 1
};

export default MyComponent;

另外,propTypesdefaultProps 還有另一種語法。如果你的構建已啟用 ES7 屬性初始值設定項,則這是一個快捷方式:

import React from 'react';

class MyComponent extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
    position: React.PropTypes.number
  };
  static defaultProps = {
    name: 'Home',
    position: 1
  };
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}

export default MyComponent;