React useContext

useContext 允许父组件向其下层无论多深的任何组件提供信息，而无需通过 props 显式传递。

// 1. LevelContext.js  创建 context，将其从文件中导出 
import { createContext } from 'react';
export const LevelContext = createContext(1);

// 2. Section.jsx  提供 context 
import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

// 3. Heading.jsx 使用 Context 
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';
export default function Heading({ children }) {
  const level = useContext(LevelContext);
  switch (level) {
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
    default:
      throw Error('未知的 level：' + level);
  }
}

// App.jsx
import Heading from './Heading.js';
import Section from './Section.js';
export default function Page() {
  return (
    <Section level={1}>
      <Heading>主标题</Heading>
      <Section level={2}>
        <Heading>副标题</Heading>
        <Heading>副标题</Heading>
        <Heading>副标题</Heading>
        <Section level={3}>
          <Heading>子标题</Heading>
          <Heading>子标题</Heading>
          <Heading>子标题</Heading>
        </Section>
      </Section>
    </Section>
  );
}

组件会使用 UI 树中在它上层最近的那个 <LevelContext.Provider> 传递过来的值。不是同级，也不是更远的层级。