【全栈React】第8天: 属性类型

摘要：在大多数情况下，我们期望这些是一种特定类型或一组类型也称为或。例如，几天前我们构建的组件接受一个称为的属性，我们期望它是一个字符串。必需类型可以通过在任意个属性类型中附加中描述来将需要传递给一个组件根据需要设置是非常有用的。

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3818
原文：https://www.fullstackreact.com/30-days-of-react/day-8/

我们正在考虑如何在今天重新使用React组件，这样我们不仅可以在应用而且可以在团队中共享我们的组件。

唷！ 我们做了第二周（相对毫发）！ 通过这一点，我们已经讨论了React（props，state，生命周期挂钩函数，JSX等）的大部分基本特性。 在本节中，我们将看一下注解我们的组件。

您可能已经注意到我们在组件中使用了props 。 在大多数情况下，我们期望这些是一种特定类型或一组类型（也称为object 或string）。 React提供了一种定义和验证这些类型的方法，使我们能够轻松暴露组件API。

文档化不仅是好习惯，对于构建也是有益的reusable react components.

React.PropTypes对象导出一堆不同的类型，我们可以用它来定义组件的prop应该是什么类型的。 我们可以在ES6类风格的React prop中使用propTypes方法来定义它们：

class Clock extends React.Component {
  // ...
}

Clock.propTypes = {
  // key is the name of the prop and
  // value is the PropType
}

使用React.createClass() 形式, 我们定义一个propTypes的key
例如，我们可以将Clock组件的形式重写为：
const Clock = React.createClass({
  proptypes: {}
}); 

从这个prop里面，我们可以定义一个对象，它具有一个prop的key作为我们定义的prop的名称，它应被定义的类型（或类型）的一个值。

例如，几天前我们构建的Header 组件接受一个称为title 的属性，我们期望它是一个字符串。 我们可以将其类型定义为字符串：

class Header extends React.Component {
  // ...
}

Header.propTypes = {
  title: React.PropTypes.string
}

React有很多类型可供选择，在React.PropTypes 对象上导出，甚至允许我们定义一个自定义的对象类型。 看看可用类型的总体列表：

React暴露了我们可以开箱即用的几种基本类型。

可以告诉React我们希望它传递_anything_可以使用React.PropTypes.node来呈现：

Clock.propTypes = {
  title: React.PropTypes.string,
  count: React.PropTypes.number,
  isOn: React.PropTypes.bool,
  onDisplay: React.PropTypes.func,
  symbol: React.PropTypes.symbol,
  user: React.PropTypes.object,

  name: React.PropTypes.node
}

我们已经看过如何使用props从父组件到子组件进行通信。 我们可以使用函数从子组件到父组件进行通信。 当我们想要操作一个子组件的父组件时，我们会经常使用这种模式。

我们可以通过我们的props中的可迭代的集合。 当我们通过我们的活动通过一个数组时，我们已经看到了如何做到这一点。 要将组件的proptype声明为数组，我们可以使用 React.PropTypes.array 注解。

我们也可以要求数组只能使用某种类型的对象 React.PropTypes.arrayOf([]).

可以使用React.PropTypes.oneOfType([types])来描述可以是几种不同类型之一的对象。

Clock.propTypes = {
  counts: React.PropTypes.array,
  users: React.PropTypes.arrayOf(React.PropTypes.object),
  alarmColor: React.PropTypes.oneOf(["red", "blue"]),
  description: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.instanceOf(Title)
    ]),
}

可以定义需要某个特定类型的特定类型或实例的类型。

Clock.propTypes = {
  basicObject: React.PropTypes.object,

  numbers: React.PropTypes
    .objectOf(React.PropTypes.numbers),

  messages: React.PropTypes
    .instanceOf(Message),

  contactList: React.PropTypes.shape({
    name: React.PropTypes.string,
    phone: React.PropTypes.string,
  })
}

我们也可以通过React元素从父组件到子组件。 这对于构建模板和提供模板的定制非常有用。