如何使用props在你的React组件中传递数据

如何使用props在你的React组件中传递数据

Props是组件获得其属性的方式。从顶层组件开始，每一个子组件都从父组件获得其props。在一个函数组件中，props是它得到的所有传递，它们可以通过添加props 作为函数参数而获得。

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

在一个类组件中，道具是默认传递的。不需要添加任何特殊的东西，它们可以在组件实例中作为this.props 。

import React, { Component } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

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

在以下情况下，情况会变得复杂。

• 你需要从几级的子组件中访问一个组件的状态（所有之前的子组件都需要作为一个传递者，即使它们不需要知道状态，这使事情变得复杂了）
• 你需要从一个完全不相关的组件中访问一个组件的状态。

Props的默认值

如果任何值不是必须的，我们需要为它指定一个默认值，如果它在组件初始化时丢失的话。

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

BlogPostExcerpt.defaultProps = {
  title: '',
  description: ''
}

一些工具（如ESLint）能够强制定义Component的默认Props，有些propTypes不是明确需要的。

如何传递道具

当初始化一个组件时，以类似于HTML属性的方式传递props。

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

我们把标题作为一个普通的字符串来传递（这是我们只能对字符串做的事情！），把描述作为一个变量。

children

一个特殊的道具是children 。这包含了在组件的body 中传递的任何东西的值，比如说。

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

在这种情况下，在BlogPostExcerpt 里面，我们可以通过查询this.props.children 来访问 "某某"。

道具允许组件从它的父辈那里接收属性，例如被 "指示 "打印一些数据，而状态则允许组件自己获得生命，并独立于周围环境。