如何保留步骤分组共享状态同时让父组件直接获取子步骤？

方法1：通过Wrapper组件递归平级化Step，用Context保留分组状态 #

先定义带状态管理的分组组件，同时用Context把共享状态传递给组内的Step：

import { useState, createContext, useContext } from 'react';

// 定义分组状态的Context
const GroupStateContext = createContext({
  groupState: {},
  setGroupState: () => {}
});

// 自定义分组组件，管理组内共享状态
const StepGroup = ({ children }) => {
  const [groupState, setGroupState] = useState({});

  return (
    <GroupStateContext.Provider value={{ groupState, setGroupState }}>
      {children}
    </GroupStateContext.Provider>
  );
};

// 组内的Step可以通过useContext获取共享状态
const Step1 = () => {
  const { groupState, setGroupState } = useContext(GroupStateContext);
  // 这里使用分组状态
  return <div>Step 1</div>;
};

再写一个Wrapper组件，递归遍历所有子元素，把Group里的Step提取出来变成平级结构，传递给原Parent组件：

const ParentWrapper = ({ children }) => {
  // 递归提取所有Step组件
  const flattenSteps = (nodes) => {
    return React.Children.toArray(nodes).flatMap(node => {
      if (React.isValidElement(node)) {
        if (node.type === StepGroup) {
          return flattenSteps(node.props.children);
        }
        return [node];
      }
      return [];
    });
  };

  const flattenedSteps = flattenSteps(children);
  return <Parent>{flattenedSteps}</Parent>;
};

使用方式：

<ParentWrapper>
  <StepGroup>
    <Step1 />
    <Step2 />
  </StepGroup>
  <StepGroup>
    <Step3 />
  </StepGroup>
</ParentWrapper>

方法2：克隆Step组件注入状态，无需Context #

如果不想用Context，可以在分组组件里直接把状态作为props注入给组内的Step：

const StepGroup = ({ children }) => {
  const [groupState, setGroupState] = useState({});

  // 克隆子元素并注入分组状态
  const enhancedSteps = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { groupState, setGroupState });
    }
    return child;
  });

  return <>{enhancedSteps}</>;
};

// Step组件通过props接收状态
const Step1 = ({ groupState, setGroupState }) => {
  // 使用分组状态
  return <div>Step 1</div>;
};

同样搭配上面的ParentWrapper使用，原Parent组件就能拿到平级的Step，同时Step能访问分组内的共享状态。

方法3：修改库的children处理逻辑（可选） #

如果能修改库的源代码，找到处理children的逻辑（比如你提到的context文件第25行），把直接读取children的代码改成递归提取Step：

// 替换库中原有的children处理代码
const flattenSteps = (nodes) => {
  return React.Children.toArray(nodes).flatMap(node => {
    if (React.isValidElement(node)) {
      // 递归遍历所有子元素，提取Step
      return flattenSteps(node.props.children) || [node];
    }
    return [];
  });
};

const steps = flattenSteps(children);

这样库就能自动识别分组内的Step，无需额外Wrapper组件，但需要你有权限修改库代码或fork后自定义修改。

内容的提问来源于stack exchange，提问作者Peter S