30天入坑React ---------------day08 PropTypes

这篇文章是30天React系列的一部分 。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

使用它来定义组件的prop应该是什么类型。我们可以使用propTypesES6类风格的React prop中的方法来定义它们：

作用:如果不按照规定的类型写,浏览器会爆出警告,一种变量类型的约定

一种约定,与开发人员进行沟通的一种注释

defaultProps设置默认的属性,

PropTypes.array注释

最后，还可以传递一个函数来定义自定义类型。我们可以为单个prop或者验证数组执行此操作。自定义函数的一个要求是，如果验证没有通过，它希望我们将返回一个Error对象：

包装和PropTypes

在Github上编辑此页面

我们正在研究如何制作可重用的React组件，以便我们不仅可以跨应用程序和团队共享我们的组件。

唷！我们到了第二周（相对没有受伤）！通过这一点，我们已经通过大部分的阵营（的基本特征交谈props，state生命周期挂钩，JSX等）。

在本节中，我们将看一下注释和打包我们的组件。

PropTypes

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

这不仅是文档编写的好方法，而且非常适合构建可重用的反应组件。

该prop-types对象导出了许多不同的类型，我们可以使用它来定义组件的prop应该是什么类型。我们可以使用propTypesES6类风格的React prop中的方法来定义它们：

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

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

从这一点开始prop，我们可以定义一个对象，它具有prop的键作为我们定义的prop的名称，value定义它应该定义的类型（或类型）。

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

首先，我们需要import将PropTypes包从prop-types使用包import再次关键字：

import PropTypes from 'prop-types'

import PropTypes from 'prop-types'

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

Header.propTypes = {
  title: PropTypes.string
}

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

基本类型

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

类型	例	类
串	'你好'	PropTypes.string
数	10,0.1	PropTypes.number
布尔	真假	PropTypes.bool
功能	const say => (msg) => console.log("Hello world")	PropTypes.func
符号	符号（“味精”）	PropTypes.symbol
宾语	{name: 'Ari'}	PropTypes.object
什么	'不管'，10， {}

有可能告诉React我们希望它通过使用以下任何可以呈现的内容PropTypes.node：

类型	例	类
一个可以渲染的	10，'你好'	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。我们可以使用函数从子组件到父组件进行通信。当我们想要操纵子组件中的父组件时，我们会经常使用这种模式。

集合类型

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

我们还可以要求数组仅包含某种类型的对象PropTypes.arrayOf([])。

类型	例	类
排列	[]	PropTypes.array
一系列数字	[1,2,3]	PropTypes.arrayOf([type])
枚举	['红蓝']	PropTypes.oneOf([arr])

可以描述一个对象，它也可以是几种不同类型中的一种PropTypes.oneOfType([types])。

Clock.propTypes = {
  counts: PropTypes.array,
  users: PropTypes.arrayOf(PropTypes.object),
  alarmColor: PropTypes.oneOf(['red', 'blue']),
  description: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.instanceOf(Title)
    ]),
}
</code></span></span>

对象类型

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

类型	例	类
宾语	{name: 'Ari'}	PropTypes.object
数字对象	{count: 42}	PropTypes.objectOf()
例	new Message()	PropTypes.objectOf()
物体形状	{name: 'Ari'}	PropTypes.shape()

Clock.propTypes = {
  basicObject: PropTypes.object,

  numbers: PropTypes
    .objectOf(PropTypes.numbers),

  messages: PropTypes
    .instanceOf(Message),

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

反应类型

我们还可以将React元素从父级传递给子级。这对于构建模板和使用模板提供自定义非常有用。

类型	例	类
元件	<Title />	PropTypes.element

Clock.propTypes = {
  displayEle: PropTypes.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>

需要类型

通过附加任何 proptype描述，可以要求将prop传递给组件.isRequired：

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

prop当组件依赖prop于由其父组件传入的时间并且没有它时将无法工作时，设置所需的非常有用。

自定义类型

最后，还可以传递一个函数来定义自定义类型。我们可以为单个prop或者验证数组执行此操作。自定义函数的一个要求是，如果验证没有通过，它希望我们将返回一个Error对象：

类型	例	类
习惯	'something_crazy'	function(props, propName, componentName) {}
CustomArray的	['某事'，'疯狂']	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
      )
    }
  }
}

默认道具

有时我们希望能够为道具设置默认值。例如，我们<Header />昨天构建的组件可能不需要传递标题。如果不是，我们仍然需要渲染标题，因此我们可以通过设置默认的prop值来定义公共标题。

要设置默认prop值，我们可以使用defaultProps组件上的对象键。

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

Phew，今天我们经历了很多文档。它总是建立我们可重用的使用组件的好主意propTypes和defaultProps组件的属性。它不仅可以让开发人员之间的沟通变得更加容易，而且在我们离开它们几天后返回我们的组件时会更容易。

接下来，我们将回到代码并开始将一些样式集成到我们的组件中。

学习REACT正确的方法

React和朋友的最新，深入，完整的指南。

下载第一章

❮上一个

下一章：

样式

下一个 ❯

本教程系列的完整源代码可以在GitHub repo上找到，其中包括所有样式和代码示例。

如果您在任何时候感到困难，还有其他问题，请随时通过以下方式与我们联系：

• 在文章末尾评论这篇文章
• 通过react@fullstackreact.com发送电子邮件给我们
• 加入我们的gitter室
• 发送电子邮件至@fullstackreact

---

 

学习构建真正的React应用程序

想了解如何在生产应用程序中使用React？点击下面的电子邮件，我们将通过电子邮件向您发送PDF文件，引导您在React中逐步构建应用程序 - 从空文件夹到工作应用程序。

名字

 

电子邮件地址

  发送我的PDF

没有垃圾邮件，很容易取消订阅。