一、context

1. 使用場景

設(shè)想一個場景，假如我們要給子孫組件傳值，應(yīng)該怎么辦呢？

如果使用props一層一層往下 傳遞的話，特別的繁瑣！

更好的辦法：使用context來幫助我們跨組件傳遞數(shù)據(jù)

2. 使用步驟

• 調(diào)用 React.createContext() 創(chuàng)建 Provider（提供數(shù)據(jù)） 和 Consumer（消費數(shù)據(jù)） 兩個組件

const { Provider, Consumer } = React.createContext()

• 使用 Provider 組件作為父節(jié)點。

<Provider>
  <div className="App">
    <Child1 />
  </div>
</Provider>

• 設(shè)置 value 屬性，表示要傳遞的數(shù)據(jù)。

<Provider value="pink">

• 調(diào)用 Consumer 組件接收數(shù)據(jù)。

<Consumer>
  {data => <span>data參數(shù)表示接收到的數(shù)據(jù) -- {data}</span>}
</Consumer>

3. 總結(jié)

• 如果兩個組件是多層嵌套可以使用Context實現(xiàn)組件通訊
• Context提供了兩個組件：Provider 和 Consumer
• Provider組件：用來提供數(shù)據(jù)
• Consumer組件：用來消費數(shù)據(jù)

二、props深入

1. children 屬性

children 屬性：表示組件標簽的子節(jié)點。當組件標簽有子節(jié)點時，props 就會有該屬性

children 屬性與普通的props一樣，值可以是任意值（文本、標簽、組件、甚至是函數(shù)）

代碼如下（示例）：

function Hello(props) {
  return (
    <div>
      組件的子節(jié)點：{props.children}
    </div>
  )
}
<Hello>我是子節(jié)點</Hello>

2. props 校驗

對于組件來說，props 是外部數(shù)據(jù)的容器，無法保證組件使用者傳入什么格式的數(shù)據(jù)

如果傳入的數(shù)據(jù)格式不對，可能會導(dǎo)致組件內(nèi)部報錯

關(guān)鍵問題：除了語法報錯信息之外沒有額外的錯誤提示

代碼如下（示例）：

// 創(chuàng)建的組件
function App(props) {
  const arr = props.colors
  const list = arr.map((item, index) => <li key={index}>{item}</li>)
  return (
    <ul>{list}</ul>
  )
}
// 使用組件時
<App colors={19} />

props 校驗：允許在創(chuàng)建組件的時候，就指定 props 的類型、格式等

作用：捕獲使用組件時因為props導(dǎo)致的錯誤，給出明確的錯誤提示，增加組件的健壯性

3. props校驗使用步驟

• 安裝 prop-types （npm i prop-types ）
• 導(dǎo)入 prop-types 包
• 使用 組件名.propTypes = {} 來給組件的props添加校驗規(guī)則
• 校驗規(guī)則通過 PropTypes 對象來指定

import PropTypes from 'prop-types'
function App(props) {
  return (
    <h1>Hi, {props.colors}</h1>
  )
}
App.propTypes = {
  // 約定colors屬性為array類型
  // 如果類型不對，則報出明確錯誤，便于分析錯誤原因
  colors: PropTypes.array
}

4. props校驗約束規(guī)則

常見類型： number、 string、 array、bool、func、object

React元素類型：element

必填項：isRequired

特定結(jié)構(gòu)的對象：shape({ })

// 常見類型
optionalFunc: PropTypes.func,
// 必選
requiredFunc: PropTypes.func.isRequired,
// 特定結(jié)構(gòu)的對象
optionalObjectWithShape: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

5. props默認值

場景：分頁組件 → 每頁顯示條數(shù)

作用：給 props 設(shè)置默認值，在未傳入 props 時生效

function App(props) {
  return (
    <div>
      此處展示props的默認值：{props.pageSize}
    </div>
  )
}
// 設(shè)置默認值
App.defaultProps = {
  pageSize: 10
}
// 不傳入pageSize屬性
<App />

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

最新評論