react hooks 中useContext的使用

父组件中：

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;