如何使用 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.children
在 BlogPostExcerpt
元件中獲取 “Something”。
雖然 Props 允許元件從其父元件接收屬性,例如用於 “指示” 元件打印某些資料,但狀態(State)允許元件具有自己的生命週期,並獨立於周圍的環境。