React-使用-Context-深层传递参数

Context 允许父组件向其下层无论多深的任何组件提供信息, 而无需通过 props 显式传递. 也可以理解为, 子组件可以通过 Context 访问到组件树中某处在其上层的数据.

创建 context

import { createContext } from 'react';

export const LevelContext = createContext(1);

这里的 1 是提供的默认值. (可以传入任意类型)

提供 context

import { LevelContext } from './LevelContext.js';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

这表明, 若 {children} 中的子组件请求 LevelContext 这一 Context, 则将 level 值传递过去.

使用 context

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  // ...
}

利用 useContet 这个 Hook, 表示读取哪个 Context 的值.

覆盖某层 context

在 React 中, 覆盖来自上层的某些 context 的唯一方法是将子组件包裹到一个提供不同值的 context provider 中.