如何向多步骤表单最后一步组件传递goTo()函数？

我正在使用WebDev Simplified提供的useMultistepForm Hook，代码如下：

import { ReactElement, useState } from 'react';

export function useMultistepForm(steps: ReactElement[], initialStep = 0) {
  const [currentStepIndex, setCurrentStepIndex] = useState(initialStep);

  function next() {
    setCurrentStepIndex((i) => {
      if (i >= steps.length - 1) return i;
      return i + 1;
    });
  }

  function back() {
    setCurrentStepIndex((i) => {
      if (i <= 0) return i;
      return i - 1;
    });
  }

  function goTo(index: number) {
    setCurrentStepIndex(index);
  }

  return {
    currentStepIndex,
    step: steps[currentStepIndex],
    steps,
    numberOfSteps: steps.length,
    isFirstStep: currentStepIndex === 0,
    isLastStep: currentStepIndex === steps.length - 1,
    goTo,
    next,
    back,
  };
}

我想把Hook返回的goTo()传给步骤数组的最后一个组件（总结页），让用户能跳转回指定步骤修改内容。知道用React.cloneElement能实现，但官方说这方法不常用还容易让代码变脆弱，求靠谱的替代方案。

给你几个更稳妥的替代写法，都是React推荐的思路：

方案1：把步骤改成接受props的组件，而非直接传元素 #

原来的steps数组存的是React元素，现在改成存组件类/函数，Hook渲染时给组件传递goTo等需要的props。这样组件能直接拿到方法，完全不用克隆元素。

修改后的Hook：

import { useState, ComponentType } from 'react';

// 先定义步骤组件需要的props类型
type StepProps = {
  goTo?: (index: number) => void;
  // 要是需要其他参数，比如当前步骤索引，也可以加在这里
};

export function useMultistepForm(
  steps: ComponentType<StepProps>[], 
  initialStep = 0
) {
  const [currentStepIndex, setCurrentStepIndex] = useState(initialStep);

  const next = () => setCurrentStepIndex(i => i >= steps.length - 1 ? i : i + 1);
  const back = () => setCurrentStepIndex(i => i <= 0 ? i : i - 1);
  const goTo = (index: number) => setCurrentStepIndex(index);

  // 拿到当前步骤的组件，传入goTo props
  const CurrentStep = steps[currentStepIndex];
  const step = <CurrentStep goTo={goTo} />;

  return {
    currentStepIndex,
    step,
    numberOfSteps: steps.length,
    isFirstStep: currentStepIndex === 0,
    isLastStep: currentStepIndex === steps.length - 1,
    goTo,
    next,
    back,
  };
}

使用示例：

// 总结页组件直接接收goTo
function SummaryStep({ goTo }: StepProps) {
  return (
    <div>
      <h2>填写总结</h2>
      <button onClick={() => goTo(0)}>返回第一步改信息</button>
      <button onClick={() => goTo(1)}>返回第二步选选项</button>
    </div>
  );
}

// 其他步骤组件，不需要goTo就不用接收
function Step1() {
  return <div>第一步：填写基本信息</div>;
}

function Step2() {
  return <div>第二步：选择服务类型</div>;
}

// 使用Hook时传入组件数组就行
function MyForm() {
  const { step, next, back, isFirstStep, isLastStep } = useMultistepForm([Step1, Step2, SummaryStep]);
  
  return (
    <div>
      {step}
      <div className="form-controls">
        {!isFirstStep && <button onClick={back}>上一步</button>}
        {!isLastStep && <button onClick={next}>下一步</button>}
      </div>
    </div>
  );
}

这个方案逻辑直白，完全符合React组件props传递的设计思路，代码维护起来也简单。

方案2：用React Context共享控制方法 #

如果你的表单步骤很多，或者多个组件都需要用到goTo、next这些方法，用Context把这些方法全局共享起来是最优解，不用手动给每个组件传props。

先创建上下文：

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

// 定义上下文里的方法和状态类型
type MultistepContextType = {
  currentStepIndex: number;
  goTo: (index: number) => void;
  next: () => void;
  back: () => void;
  isFirstStep: boolean;
  isLastStep: boolean;
};

const MultistepContext = createContext<MultistepContextType | undefined>(undefined);

// 写一个Provider组件包裹表单
export function MultistepProvider({ children, totalSteps, initialStep = 0 }: {
  children: ReactNode;
  totalSteps: number;
  initialStep?: number;
}) {
  const [currentStepIndex, setCurrentStepIndex] = useState(initialStep);

  const next = () => setCurrentStepIndex(i => i >= totalSteps - 1 ? i : i + 1);
  const back = () => setCurrentStepIndex(i => i <= 0 ? i : i - 1);
  const goTo = (index: number) => setCurrentStepIndex(index);

  const isFirstStep = currentStepIndex === 0;
  const isLastStep = currentStepIndex === totalSteps - 1;

  return (
    <MultistepContext.Provider value={{
      currentStepIndex,
      goTo,
      next,
      back,
      isFirstStep,
      isLastStep
    }}>
      {children}
    </MultistepContext.Provider>
  );
}

// 自定义Hook，方便组件获取上下文
export function useMultistep() {
  const context = useContext(MultistepContext);
  if (!context) {
    throw new Error('useMultistep必须在MultistepProvider内部使用');
  }
  return context;
}

然后改造表单和步骤组件：

// 总结页直接用useMultistep拿goTo
function SummaryStep() {
  const { goTo } = useMultistep();
  return (
    <div>
      <h2>总结页</h2>
      <button onClick={() => goTo(0)}>回第一步修改</button>
    </div>
  );
}

function MyForm() {
  const steps = [<Step1 />, <Step2 />, <SummaryStep />];
  const { currentStepIndex, next, back, isFirstStep, isLastStep } = useMultistep();

  return (
    <MultistepProvider totalSteps={steps.length} initialStep={0}>
      {steps[currentStepIndex]}
      <div>
        {!isFirstStep && <button onClick={back}>上一步</button>}
        {!isLastStep && <button onClick={next}>下一步</button>}
      </div>
    </MultistepProvider>
  );
}

这种方式适合复杂的多步骤表单，不管嵌套多少层组件，都能直接拿到控制方法，不用层层传参。

方案3：用渲染函数（Render Props）传递方法 #

把每个步骤写成一个函数，Hook调用这个函数时传入goTo等props，函数返回对应的JSX。这种方式比较灵活，适合快速适配现有组件。

修改Hook：

import { useState, ReactNode } from 'react';

// 步骤是一个接收props的函数，返回JSX
type StepRenderFn = (props: { goTo: (index: number) => void }) => ReactNode;

export function useMultistepForm(steps: StepRenderFn[], initialStep = 0) {
  const [currentStepIndex, setCurrentStepIndex] = useState(initialStep);

  const next = () => setCurrentStepIndex(i => i >= steps.length - 1 ? i : i + 1);
  const back = () => setCurrentStepIndex(i => i <= 0 ? i : i - 1);
  const goTo = (index: number) => setCurrentStepIndex(index);

  // 调用当前步骤的函数，传入goTo
  const step = steps[currentStepIndex]({ goTo });

  return {
    currentStepIndex,
    step,
    numberOfSteps: steps.length,
    isFirstStep: currentStepIndex === 0,
    isLastStep: currentStepIndex === steps.length - 1,
    goTo,
    next,
    back,
  };
}

使用示例：

// 总结页写成渲染函数
const SummaryStep = ({ goTo }) => (
  <div>
    <h2>总结</h2>
    <button onClick={() => goTo(0)}>返回第一步</button>
  </div>
);

// 其他步骤可以是简单的函数
const Step1 = () => <div>第一步内容</div>;
const Step2 = () => <div>第二步内容</div>;

function MyForm() {
  const { step, next, back, isFirstStep, isLastStep } = useMultistepForm([
    () => <Step1 />, // 不需要goTo的步骤直接返回元素
    () => <Step2 />,
    SummaryStep
  ]);
  
  return (
    <div>
      {step}
      <div>
        {!isFirstStep && <button onClick={back}>上一步</button>}
        {!isLastStep && <button onClick={next}>下一步</button>}
      </div>
    </div>
  );
}

这个方案改动最小，适合不想大改现有组件结构的场景。

内容的提问来源于stack exchange，提问作者John Dough