react使用createContext

本文主要是介绍react使用createContext，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Home.js文件

import React, { useState , createContext } from 'react';
import List from './List'
//===关键代码 不同组件导出
export const CountContext = createContext()function Home(){const [ count , setCount ] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={()=>{setCount(count+1)}}>click me</button>{/*======关键代码 将其注入子组件 */}<CountContext.Provider value={count}> <List /></CountContext.Provider></div>)
}
export default Home;

List.js文件

import React, { useState, useContext } from 'react';
import { CountContext } from './Home' //需要导入对应组件的createContextfunction List(){const count = useContext(CountContext) //一句话就可以得到countreturn (<h2>{count}</h2>)
}export default List;

这篇关于react使用createContext的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---