用形状反应 PropType 数组

在React中，我们经常使用PropTypes来定义我们组件所需要的props的类型。其中一个有用但不太被人们所知的方法是使用形状反应的PropTypes数组。

形状反应的PropTypes数组可以让我们非常方便地定义一个组件需要的复杂类型的props，例如嵌套对象或数组。其语法如下：

Component.propTypes = {
  arrayOfShape: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    address: PropTypes.shape({
      city: PropTypes.string.isRequired,
      state: PropTypes.string.isRequired,
      zip: PropTypes.string
    }).isRequired,
  })).isRequired,
}

该示例定义了一个名为arrayOfShape的props，它是由一组描述对象的数组构成，每个对象都必须符合一个特定的模式。模式本身是通过shape定义的，其中包含一个对象，该对象的键是属性名，值是一个PropTypes类型。

在该示例中，我们的数组包含了一个形状，它具有一个名称、年龄和包含城市、州和邮政编码属性的地址形状对象。

因为PropTypes不支持复杂类型检查，因此你可以使用this.props验证属性是否是一个数组，并使用Array.prototype.every()来验证属性中每个元素是否与定义的对象形状匹配。

import PropTypes from 'prop-types';

class Component extends React.Component {
  static propTypes = {
    arrayOfShape: PropTypes.array.isRequired
  };

  static childContextTypes = {
    theme: PropTypes.object.isRequired,
  };

  getChildContext() {
    return { theme: this.props.theme };
  }

  render() {
    return <div>{JSON.stringify(this.props.arrayOfShape)}</div>;
  }
}

const obj1 = {
  name: 'Tim',
  age: 24,
  address: {
    city: 'San Francisco',
    state: 'CA',
    zip: '94101'
  }
};
const obj2 = {
  name: 'John',
  age: 30,
  address: {
    city: 'Los Angeles',
    state: 'CA',
    zip: '90001'
  }
};
const arrayOfShape = [obj1, obj2];

ReactDOM.render(
  <Component arrayOfShape={arrayOfShape} />, 
  document.getElementById('root')
);

运行该示例，你将得到一个输出形如[{ "name": "Tim", "age": 24, "address": { "city": "San Francisco", "state": "CA", "zip": "94101" }}, { "name": "John", "age": 30, "address": { "city": "Los Angeles", "state": "CA", "zip": "90001" }}]的JSON字符串。

在你的组件中使用形状反应的PropTypes数组可以使你更容易地定义和验证复杂的props对象，使你的代码更易于调试和维护。