如何将父组件state以props传递给{children}下所有组件 | React.js

方案一：通过React.Children.map + React.cloneElement批量注入Props #

这种方式适合子组件直接作为FormStep子元素的场景，无需手动给每个子组件传参，自动批量注入状态和修改方法：

import { useState, Children, cloneElement } from 'react';

export function FormStep({ children }) {
  const [activeStep, setActiveStep] = useState(null);

  // 遍历所有子组件，注入需要的状态和方法
  const enhancedChildren = Children.map(children, child => {
    // 仅处理有效的React元素节点
    if (React.isValidElement(child)) {
      return cloneElement(child, {
        isActive: activeStep,
        setActiveStep
      });
    }
    return child;
  });

  return (
    <ul
      className={
        "pointer-events-none absolute flex translate-x-[200px] flex-col justify-between gap-7 opacity-0 transition duration-200 ease-in-out"
      }
    >
      {enhancedChildren}
    </ul>
  );
}

子组件使用示例：直接通过props接收注入的值

function StepItem({ isActive, setActiveStep }) {
  return (
    <li onClick={() => setActiveStep(1)}>
      当前激活步骤：{isActive}
    </li>
  );
}

// 调用FormStep时无需手动传参
<FormStep>
  <StepItem />
  <StepItem />
</FormStep>

方案二：使用React Context（适合复杂嵌套场景） #

如果子组件嵌套层级较深，或后续有更多组件需要共享该状态，用Context更灵活：

1. 创建Context（可单独抽离文件） #

import { createContext, useContext } from 'react';

const StepContext = createContext({
  activeStep: null,
  setActiveStep: () => {}
});

export const useStepContext = () => useContext(StepContext);

2. 父组件用Provider包裹子组件 #

import { useState } from 'react';
import { StepContext } from './StepContext';

export function FormStep({ children }) {
  const [activeStep, setActiveStep] = useState(null);

  return (
    <StepContext.Provider value={{ activeStep, setActiveStep }}>
      <ul
        className={
          "pointer-events-none absolute flex translate-x-[200px] flex-col justify-between gap-7 opacity-0 transition duration-200 ease-in-out"
        }
      >
        {children}
      </ul>
    </StepContext.Provider>
  );
}

3. 子组件通过Hook获取状态和方法 #

import { useStepContext } from './StepContext';

function StepItem() {
  const { activeStep, setActiveStep } = useStepContext();
  
  return (
    <li onClick={() => setActiveStep(2)}>
      当前激活步骤：{activeStep}
    </li>
  );
}

内容的提问来源于stack exchange，提问作者Navid Azimi