React使用hook實現跨組件傳值

衆所周知使用props傳值是最簡單也是最有效的方式，但是當組件嵌套過深時就會把props的不便之處暴露出來，如果使用props就需要層層傳遞我們需要用到的參數。這樣就會顯得很繁瑣哪怕中間層沒有用到props仍需接收props用於給子組件繼續傳遞，下面我們來介紹可以跨過中間件的方式實現傳值。

1. 定義我們需要用到的引入API封裝起來的文件createContext.ts(因爲我用的是ts所以後綴是ts也可以是js)

import { createContext } from 'react'
const myContext = createContext<any>(null)
export default myContext

2. 父組件代碼示例

// 引入我們定義的第一步的文件
import myContext from '@/utils/createContext'
// 使用myContext.Provider包裹我們需要傳值的組件 value屬性是我們要傳的值
// industryList爲我要傳的值 在這裏我傳遞的是一個Object 裏面包含一個industryList
const Parent = () => {
  return (
    <div>
      <span>我是頂層父元素</span>
      <myContext.Provider value={{ industryList }}>
        <Child />
      </myContext.Provider>
    </div>
  )
}

3. 子組件內部使用傳的值

// 同樣需要引入我們定義的第一步的文件
import myContext from '@/utils/createContext'
import React, { useContext } from 'react'
// 使用useContext包裹 最終使用解構拿到我們需要的值
const Child = () => {
  const { industryList } = useContext(myContext)
  return (
    <div>我是子元素（我也可以是子的子元素）</div>
  )
}

總結： 一套用下來還是很簡單方便的，如果組件層級過深非常推薦使用