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>
  )
}

总结： 一套用下来还是很简单方便的，如果组件层级过深非常推荐使用