如何使用 props 在 React 元件之間傳遞資料

Props 是元件獲取屬性的方式。從最上層的元件開始,每個子元件都從父元件獲取它們的 props。在函數元件中,props 會作為函數參數傳遞,只能通過 props 來獲取:

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

在類別元件中,props 會默認傳遞。不需要添加任何特殊代碼,可以在元件實例中使用 this.props 獲取 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 接收資料。

當出現以下情況時,會變得複雜:

  • 需要從多級子元件中的子元件存取元件的狀態(即使前面的子元件不需要知道狀態,也需要它們作為中介)。
  • 需要從完全無關的元件存取元件的狀態。

Props 的預設值

如果某些值不是必需的,則在元件初始化時需要為它指定一個預設值。

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

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

某些工具(如 ESLint)能夠強制要求為具有某些 propTypes 的元件定義 defaultProps。

Props 的傳遞方式

在初始化元件時,以類似 HTML 屬性的方式傳遞 props:

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

我們將 title 傳遞為純字符串(只能使用字符串!),將 description 傳遞為變數。

子元件(Children)

一個特殊的 prop 是 children。它包含在元件的 body 中傳遞的任何內容的值,例如:

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

在這個例子中,我們可以通過查詢 this.props.childrenBlogPostExcerpt 元件中獲取 “Something”。

雖然 Props 允許元件從其父元件接收屬性,例如用於 “指示” 元件打印某些資料,但狀態(State)允許元件具有自己的生命週期,並獨立於周圍的環境。