对象组件

Question

我正在学习 React，我正在尝试从一个 UI 库中呈现一个具有几个不同表单步骤（详细信息、付款、确认...）的表单，该 UI 库已准备好表单组件，它会遍历这些表单-步骤。

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

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

它没有= () =>，所以它不是一个实际的功能组件，所以我不能在其中添加钩子或函数。

这是一系列步骤：

const stepPages = [
  DetailStep,
  PaymentStep,
  ConfirmStep
];

这就是遍历步骤数组的实际表单组件：

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

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

Answer 1

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

将它们变成函数组件的魔法发生在表单的 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
  }} 
/>

---

编辑以在 cmets 中回答问题

你是对的，那么我怎样才能在这些对象组件中添加钩子呢？

如果每个表单步骤都需要使用钩子并管理其内部状态，那么我会将它们制作为功能组件而不是 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} />} 
  />
);