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

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

咱们正在考虑如何在今天从新使用React组件，这样咱们不只能够在应用并且能够在团队中共享咱们的组件。

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

PropTypes

您可能已经注意到咱们在组件中使用了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 对象上导出，甚至容许咱们定义一个自定义的对象类型。 看看可用类型的整体列表：

[](#basic-types)基本类型

React暴露了咱们能够开箱即用的几种基本类型。

类型	例子	类
String	'hello'	React.PropTypes.string
Number	10, 0.1	React.PropTypes.number
Boolean	true / false	React.PropTypes.bool
Function	const say => (msg) => console.log("Hello world")	React.PropTypes.func
Symbol	Symbol("msg")	React.PropTypes.symbol
Object	{name: 'Ari'}	React.PropTypes.object
Anything	'whatever', 10,	{}

能够告诉React咱们但愿它传递_anything_可使用React.PropTypes.node来呈现：

类型	例子	类
A rendererable	10, 'hello'	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([]).

类型	例子	类
Array	[]	React.PropTypes.array
Array of numbers	[1, 2, 3]	React.PropTypes.arrayOf([type])
Enum	['Red', 'Blue']	React.PropTypes.oneOf([arr])

可使用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)
    ]),
}

对象类型

能够定义须要某个特定类型的特定类型或实例的类型。

类型	例子	类
Object	{name: 'Ari'}	React.PropTypes.object
Number object	{count: 42}	React.PropTypes.objectOf()
Instance	new Message()	React.PropTypes.objectOf()
Object shape	{name: 'Ari'}	React.PropTypes.shape()

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类型

咱们也能够经过React元素从父组件到子组件。 这对于构建模板和提供模板的定制很是有用。

类型	例子	类
Element	<Title />	React.PropTypes.element

Clock.propTypes = {
  displayEle: React.PropTypes.element
}

当咱们使用_element_时，React但愿咱们可以接受一个单独的子组件。 也就是说，咱们将没法传递多个元素。

// Invalid for elements
<Clock displayElement={
  <div>Name</div>
  <div>Age</div>
}></Clock>
// Valid
<Clock displayElement={
  <div>
    <div>Name</div>
    <div>Age</div>
  </div>
}></Clock>

必需类型

能够经过在_任意_个属性类型中附加.isRequired中描述来将须要传递给一个组件：

Clock.propTypes = {
  title: React.PropTypes.name.isRequired,
}

根据须要设置prop是很是有用的。当组件依赖于一个prop被它的父组件传递，若是没有它将不会工做。

自定义类型

最后，还能够传递一个函数来定义自定义类型。 咱们能够作一个单一属性或验证数组。 自定义函数的一个要求是，若是验证肯定_not_ 传递，则指望咱们返回一个 Error 对象：

类型	例子	类
Custom	'something_crazy'	function(props, propName, componentName) {}
CustomArray	['something', 'crazy']	React.PropTypes.arrayOf(function(props, propName, componentName) {})

UserLink.propTypes = {
  userWithName: (props, propName, componentName) => {
    if (!props[propName] || !props[propName].name) {
      return new Error(
        "Invalid " + propName + ": No name property defined for component " + componentName
      )
    }
  }
}

默认属性

rendered, so we can define a common title instead by setting it's default prop value.有时，咱们但愿可以为属性设置默认值。 例如，咱们昨天构建的组件可能不须要传递标题。 若是不是，咱们仍然须要一个标题来渲染，因此咱们能够经过设置它的默认支持值来定义一个通用的标题。

要设置默认的prop值，咱们能够在组件上使用defaultProps对象键。

Header.defaultProps = {
  title: 'Github activity'
}

当使用React.createClass() 形式时，咱们能够定义一个名为getDefaultProps() 的对象键，该对象键将返回具备默认值道具的对象。

React.createClass({
  getDefaultProps: () => ({
    name: 'Github activity'
  })
})

呃，今天咱们浏览了不少文档。 使用组件的propTypes 和defaultProps 属性构建可重用组件是一个好主意。 不只可使开发人员之间进行沟通变得更加容易，并且在离开组件几天后咱们也能够轻松回收。 接下来，咱们将回到代码，并开始将某些风格整合到咱们的组件中。