javascript - 对象组件

Question

我正在学习 React，我正在尝试从一个已准备好表单组件的 UI 库中渲染一个具有几个不同表单步骤(详细信息、付款、确认...)的表单，该表单会迭代这些表单-步骤。

问题是每个“步骤”组件看起来更像是一个实际的 JS 对象:

export const DetailStep = (
    <div>Details screen with inputs, texts and images...</div> 
);

它没有 = () => 因此它不是一个实际的功能组件，因此我无法向其中添加 Hook 或函数。

这是一系列步骤:

const stepPages = [
  DetailStep,
  PaymentStep,
  ConfirmStep
];

这就是迭代步骤数组的实际 Form 组件:

<Form
  onSubmitClick={onStepSubmit}
  render={formRenderProps => {stepPages[step]} } 
/>

如果我将任何步骤更改为功能组件 (DetailStep = () => ...)，该步骤将为空白并且不会呈现。 我该如何解决这个问题/只需向每个“步骤”组件添加 Hook ？

Answer 1

JSX 声明被转换为 React.createElement 函数调用，这确实意味着示例中的 stepPages 是对象(只是它们是 React 对象)

将它们变成函数组件的魔力发生在表单的 render 属性中:

<Form
  onSubmitClick={onStepSubmit}
  render={formRenderProps => {stepPages[step]} } 
/>

您可以看到它在这里传递一个函数，该函数返回 jsx 对象。这与将 jsx 直接放入渲染函数中有点相同。

尽管我注意到在您的示例中，jsx 没有被返回，所以我希望这个示例无法正常工作。

等效的长格式如下:

<Form
  onSubmitClick={onStepSubmit}
  render={formRenderProps => {
    if (step === 0) {
      return (
        <div>Details screen with inputs, texts and images...</div> 
      )
    } else if (step === 1) {
      return (
        <div>Details screen with inputs, texts and images...</div> 
      )
    } // etc
  }} 
/>

---

编辑回答评论中的问题

You're right, so how can I add hooks into those object components?

如果每个表单步骤都需要使用钩子(Hook)并管理其内部状态，那么我会将它们设为功能组件而不是 JSX 对象，然后从 stepPages 映射中选择正确的组件并渲染它像这样:

export const DetailStep = (props) => {
  // hooks and stuff here
  return (
    <div>Details screen with inputs, texts and images...</div> 
  );
}

const StepComponent = stepPages[step];
return (
  <Form
    onSubmitClick={onStepSubmit}
    render={formRenderProps => <StepComponent {...formRenderProps} />} 
  />
);