反應道具

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

雖然道具允許組件從其父對象接收屬性,例如被“指示”以打印一些數據,但狀態允許組件承擔自身的生命,並且獨立於周圍環境。

免費下載我的反應手冊


更多反應教程: