useContext Hook
  大鸟啊 2021年03月10日 111 2

useContext Hook

主要用于组件传值,一般会单独使用一个文件,使用 React.createContext() 生成一个 context 对象,再通过 useContext 来管理分发数据,类似于 vue 的 bus。

主要和 React.createContext 配合使用。

示例

  1. 创建使用 Context 提供服务的文件:

         
    // myContext.js 文件中创建 import React from 'react'; export default React.createContext();
  2. 父组件引入并挂载:

         
    // APP 父组件 挂载 redux import reducer from './store/reducer'; import MyContext from '../../myContext'; const [ name, setName ] = useState('小明'); // 这里注意,需要使用组件 Provider 字段来创建标签 <MyContext.Provider value={{ name, setName }}> <Home /> </MyContext.Provider>
  3. 子组件中使用:

         
    // Home 子组件 使用 redux import React from 'react'; import MyContext from '../../myContext'; const Home= () => { // 取出挂载的值 const { name, setName } = React.useContext(MyContext) // 使用并添加修改的事件 return <div onClick={() => setName('大明')}>名字叫:{name}</div> }; export default Home;
最后一次编辑于 2021年03月12日 1

大鸟啊

哈哈

2021-03-12 14:03:50      回复

大鸟啊

可以的

2021-03-12 14:04:04 回复

大鸟啊
作者其他文章 更多

2021-03-10