ReachHooks之父子组件传值

一般我们会使用useContext和createContext来进行父子组件的传值 官网

父组件

我们使用计数器作为父组件

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>次数:{count}</div>
      <button onClick={() => {setCount(count + 1);}}>增加次数</button>
    </>
  );
}

子组件

我们写一个子组件，用于展示count

function ShowCount(){
  return <div>{count}</div>
}

传值

创建上下文对象

我们需要在全局创建上下文对象

const CountContext = createContext(0)

父组件传值

<>
  <div>次数:{count}</div>
  <button onClick={() => {setCount(count + 1);}}>增加次数</button>
  <CountContext.Provider value={count}>
    <ShowCount/>
  </CountContext.Provider>
</>

子组件接收值

  const count = useContext(CountContext)
  return <div>{count}</div>

当我们点击按钮的时候就会发现数据传过去了