React教程: 第8天 属性类型

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

原著PDF版本下载：下载超过300页的 PDF

我们正在考虑如何在今天重新使用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
}

在这个prop中，我们可以定义一个对象，这个对象将道具的键作为我们定义的道具的名称，并且一个值定义它应该定义的类型。

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

首先，我们需要再次使用import关键字从prop types包导入PropTypes对象：

import PropTypes from 'prop-types'

通过在页面中添加以下script标记，还可以直接在浏览器中使用PropTypes对象

<script src="https://unpkg.com/prop-types@15.6/prop-types.min.js"></script>

import PropTypes from 'prop-types'

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

Header.propTypes = {
  title: PropTypes.string
}

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

Basic types

---

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

type	example	class
String	‘hello’	PropTypes.string
Number	10, 0.1	PropTypes.number
Boolean	true / false	PropTypes.bool
Function	const say => (msg) => console.log("Hello world")	PropTypes.func
Symbol	Symbol(“msg”)	PropTypes.symbol
Object	{name: 'Ari'}	PropTypes.object
Anything	‘whatever’, 10, {}

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

type	example	class
A rendererable	10, ‘hello’	PropTypes.node

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

  name: PropTypes.node
}

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

Collection types(集合类型)

---

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

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

type	example	class
Array	[]	PropTypes.array
Array of numbers	[1, 2, 3]	PropTypes.arrayOf([type]
Enum	[‘Red’, ‘Blue’]	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 types(对象类型)

---

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

type	example	class
Object	{name: 'Ari'}	PropTypes.object
Number object	{count: 42}	PropTypes.objectOf()
Instance	new Message()	PropTypes.objectOf()
Object shape	{name: 'Ari'}	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 types(React类型)

---

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

type	example	class
Element	<Title />	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>

Requiring types(必需类型)

---

可以通过在任意个属性类型中附加.isRequired中描述来将需要传递给一个组件：

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

根据需要设置prop是非常有用的。当组件依赖于一个prop被它的父组件传递，如果没有它将不会工作。

Custom types(自定义类型)

---

最后，还可以传递一个函数来定义自定义类型。 我们可以做一个单一属性或验证数组。 自定义函数的一个要求是，如果验证确定not 传递，则期望我们返回一个 Error对象：

type	example	class
Custom	‘something_crazy’	function(props, propName, componentName) {}
CustomArray	[‘something’, ‘crazy’]	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
      )
    }
  }
}

Default props(默认属性)

---

有时我们希望能够设置道具的默认值。例如，我们昨天构建的<Header/>组件可能不需要传递标题。如果不是，我们仍然希望呈现一个标题，因此我们可以通过设置默认的prop值来定义一个公共标题。
要设置默认的prop值，可以在组件上使用defaultProps对象键。

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

嘿，今天我们查阅了很多文件。使用组件的propTypes和defaultProps属性构建可恢复组件总是一个好主意。这不仅会使开发人员之间的通信更容易，而且在离开组件几天之后，当我们返回到组件时也会容易得多。
接下来，我们将返回到代码并开始将一些样式集成到组件中。

---

上一章：生命周期钩子函数
下一章：样式

---

本教程系列的完整源代码可以在 GitHub repo, 上找到，其中包含所有样式和代码示例。
如果在任何时候你感到困扰，有进一步的问题，请随时通过以下方式与我们联系：
在原文文章末尾评论这篇文章
发送电子邮件至 [email protected]
加入我们的 gitter room
发推文给我们 @fullstackreact
REACT.JS DOM 应用 移动 JAVASCRIPT
版权声明 本译文仅用于学习、研究和交流目的，欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。
原文链接：全栈React: React 30天

---

如果有疑问可以直接留言评论，如果觉得对你有帮助，可以小小的赞赏一杯奶茶钱，谢谢！！