目錄

• 一、context
• 1. 使用場景
• 2. 使用步驟
• 3. 總結
• 二、props深入
• 1. children 屬性
• 2. props 校驗
• 3. props校驗使用步驟
• 4. props校驗約束規則
• 5. props預設值
• 總結

一、context

1. 使用場景

設想一個場景，假如我們要給子孫元件傳值，應該怎麼辦呢？

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

更好的辦法：使用context來幫助我們跨元件傳遞資料

2. 使用步驟

• 呼叫 React.createContext() 建立 Provider（提供資料） 和 Consumer（消費資料） 兩個元件

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

• 使用 Provider 元件作為父節點。

<Provider>
  <div className="App">
    <www.cppcns.comChild1 />
  </div>
</Provider>

• 設定 value 屬性，表示要傳遞的資料。

<Provider value="pink">

• 呼叫 Consumer 元件接收資料。

<Consumer>
  {data => <span>data引數表示接收到的資料 -- {data}</span>}
</Consumer>

3. 總結

• 如果兩個元件是多層巢狀可以使用Context實現元件通訊
• Context提供了兩個元件：Provider 和 Consumer
• Provider元件：用來提供資料
• Consumer元件：用來消費資料

二、props深入

1. children 屬性

children 屬性：表示元件標籤的子節點。當元件標籤有子節點時，props 就會有該屬性

children 屬性與普通的props一樣，值可以是任意值（文字、標籤、元件、甚至是函式）

程式碼如下（示例）：

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

2. props 校驗

對於元件來說，props 是外部資料的容器，無法保證元件使用者傳入什麼格式的資料

如果傳入的資料格式不對，可能會導致元件內部報錯

關鍵問題：除了語法報錯資訊之外沒有額外的錯誤提示

程式碼如下（示例）：

// 建立的元件
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 校驗：允許在建立元件的時候，就指定 props 的型別、格式等

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

3. props校驗使用步驟

• 安裝 prop-types （npm i prop-types ）
• 匯入 prop-types 包
• 使用 元件名.propTypes = {} 來給元件的props新增校驗規則
• 校驗規則通過 PropTypes 物件來指定

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

4. props校驗約束規則

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

React元素型別：element

必填項：isRequired

特定結構的物件：shape({ })

// 常見型別
optionalFunc: PropTypes.func,// 必選
requiredFunc: PropTypes.func.isRequired,// 特定結構的物件
optionalObfJGEFjectWithShape: PropTypes.shape({
  color: PropTypes.string,fontSize: PropTypes.number
})

5. props預設值

場景：分頁元件 → 每頁顯示條數

作用：給 props 設定預設值，在未傳入 props 時生效

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

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！