反应道具

如何使用道具在React组件周围传递数据

道具是组件如何获取其属性的方法。从顶部组件开始，每个子组件都从父组件获取其道具。在功能组件中，道具是传递的全部要素，它们可以通过添加props作为函数参数：

const BlogPostExcerpt = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

在类组件中，默认情况下会传递道具。无需添加任何特殊内容，它们可以通过以下方式访问this.props在Component实例中。

import React, { Component } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
)
}
}

将props传递给子组件是在应用程序中传递值的好方法。组件要么持有数据（具有状态），要么通过其道具接收数据。

在以下情况下会变得复杂：

您需要从向下几个级别的子级访问组件的状态（以前的所有子级都需要充当传递对象，即使他们不需要知道状态也很复杂）
您需要从完全不相关的组件访问组件的状态。

道具的默认值

如果不需要任何值，则在初始化组件时如果缺少默认值，则需要为其指定默认值。

BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}
BlogPostExcerpt.defaultProps = {
title: ‘’,
description: ‘’
}

一些工具，例如ESLint能够强制为某些未明确需要的propTypes的Component定义defaultProps。

道具如何传递

初始化组件时，以类似于HTML属性的方式传递道具：

const desc = 'A description'
//...
<BlogPostExcerpt title="A blog post" description={desc} />

我们将标题作为纯字符串传递（可以只要处理字符串！），并将说明作为变量。

孩子们

一个特殊的道具是children。包含在body组件的名称，例如：

<BlogPostExcerpt title="A blog post" description="{desc}">
  Something
</BlogPostExcerpt>

在这种情况下BlogPostExcerpt我们可以通过查找来访问“某事”this.props.children。

虽然道具允许组件从其父对象接收属性，例如被“指示”以打印一些数据，但状态允许组件承担自身的生命，并且独立于周围环境。

免费下载我的反应手册

反应道具

如何使用道具在React组件周围传递数据

道具的默认值

道具如何传递

孩子们

更多反应教程：