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' //需要导入对应组件的createContext

function List(){
    const count = useContext(CountContext) //一句话就可以得到count
    return (<h2>{count}</h2>)
}

export default List;