声明默认道具和 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;

另外，propTypes 和 defaultProps 还有另一种语法。如果你的构建已启用 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;