2.14 Context向组件深层传递数据

一、Context向组件深层传递数据

通常来说，可以通过props将信息从父组件传递到子组件，但如果必须通过很多中间组件向下传递peops，或者在许多组件中需要用到相同的信息，传递props会变得十分冗长和不便
Context允许父组件向其下层无论多深的组件爱你提供信息，二无需通过props显示传递

通过createContext向下传递，子孙组件通过useContext接收

import { createContext, useContext } from 'react'

// 参数是默认值，
const Context = createContext(0)

function App() {
  return (
    <>
      <div>Default Template</div>
      {/* 通过.标记写法，value是固定的，可传递数组，对象等等。如果不写.标记标签，接收默认值*/}
      <Context.Provider value={1234}>
        <Head />
      </Context.Provider>
    </>
  )
}

function Head() {
  return (
    <>
      <div>Head</div>
      <Title />
    </>
  )
}

function Title() {
  const value = useContext(Context)
  return (
    <>
      <div>Title, {value}</div>
    </>
  )
}

export default App

上一页2.13 Reducer统一的状态管理集合下一页2.15 Reducer配合Context实现共享状态管理

最后更新于2年前