/

React 屬性（Props）

React 屬性（Props）

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

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

1
2
3
4
5
6
7
8
const BlogPostExcerpt = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

在類別元件中，props 會默認傳遞。不需要添加任何特殊代碼，可以在元件實例中使用 this.props 獲取 props：

1
2
3
4
5
6
7
8
9
10
11
12
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 的預設值

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

1
2
3
4
5
6
7
8
9
BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

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

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

Props 的傳遞方式

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

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

我們將 title 傳遞為純字符串（只能使用字符串！），將 description 傳遞為變數。

子元件（Children）

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

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

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

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