反应道具

如何使用道具在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

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

免费下载我的反应手册


更多反应教程: