父组件中:
import React ,{useState, createContext} from 'react' import './App.css'; import ChildOne from './components/ChildOne'; import ChildTwo from './components/ChildTwo'; export const CountContext = createContext() function App() { const [count ,setCount] = useState(0) return ( <div className="App"> <h3>这是一个页面的头部标题</h3> <div> <div> {count}</div> <button onClick={()=>{setCount(count+1)}}>点赞?</button> </div> <div> <CountContext.Provider value={count} > <ChildOne/> </CountContext.Provider> <CountContext.Provider value={{names:'来自APP父组件的问候'}}> <ChildTwo/> </CountContext.Provider> </div> </div> ); } export default App;
子组件一中:
import React ,{useContext} from 'react'; import { CountContext } from '../App' const ChildOne = () =>{ const count = useContext(CountContext) return( <div>这是第一个子组件 <div style={{color:'red'}}>数量:{count}</div> </div> ) } export default ChildOne;
子组件二中:
import { useContext } from "react"; import { CountContext } from "../App"; const ChildTwo = () =>{ const{names} = useContext(CountContext) return( <div>这是第二个子组件 <div style={{color:'red'}}>{names}</div> </div> ) } export default ChildTwo;