将相同的 Props 传递给多个 React 组件

Question

我目前正在根据 shouldRenderPlanA 的值渲染两个不同的组件 - 然而，尽管渲染了不同的组件（取决于值） - 我传递了两个相同的道具。我如何压缩它以减少重复代码？

return (
  <>
    {options.map(option)}
    <StyledRow>
      {variousOptions.map((opt) => (
        shouldRenderPlanA ? (
          <StyledLabelOptionOne
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        ) : (
          <StyledLabelOptionTwo
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        )
      ))}
    </StyledRow>
  </>
);

Answer 1

要将相同的 Props 传递给多个 React 组件或将多个 Props 传递给一个 React 组件，您可以在组件中使用对象 unpacking/destruction。

function Component() {
  const propPack = {
    variousProps1: variousProps1,
    variousProps2: variousProps2,
    variousProps3: variousProps3,
  };

  return (
    <>
      {options.map(option)}
      <StyledRow>
        {variousOptions.map((opt) => (
          shouldRenderPlanA
            ? <StyledLabelOptionOne {...propPack} />
            : <StyledLabelOptionTwo {...propPack} />
        ))}
      </StyledRow>
    </>
  );
}

这通常用于将所有 parent props 传递给 children

function Component(props) {
  return (
    condition
      ? <StyledLabelOptionOne {...props} />
      : <StyledLabelOptionTwo {...props} />
  )
}

您也可以有条件地选择要渲染的组件（但恕我直言，可读性较差）

function Component() {
  const PickedComponent = shouldRenderPlanA ? StyledLabelOptionOne : StyledLabelOptionTwo;
  return (
    <>
      {options.map(option)}
      <StyledRow>
        {variousOptions.map((opt) => (
          <PickedComponent
            variousProps1={variousProps1}
            variousProps2={variousProps2}
            variousProps3={variousProps3}
          />
        ))}
      </StyledRow>
    </>
  );
}

对于从 .map() 派生的 conditions/props 只需在地图回调

中移动代码

function Component() {
  return (
    <>
      {options.map(option)}
      <StyledRow>
        {variousOptions.map((opt) => {
          const propPack = {
            variousProps1: variousProps1,
            variousProps2: opt.value,
          };
          const PickedComponent = opt.condition ? StyledLabelOptionOne : StyledLabelOptionTwo;
          return (
            shouldRenderPlanA
              ? <StyledLabelOptionOne {...propPack} />
              : <StyledLabelOptionTwo {...propPack} />
          )
        })}
      </StyledRow>
    </>
  );
}

请注意 map 中的箭头函数如何变成带有完整块的箭头函数。从 (opt) => (first_instruction) 到 (opt) => { first_instruction; return (second_instruction); }。这允许我们在每个 map() 周期渲染之前添加代码。

Answer 2

您可以使用 React Context API。这将使您能够在多个 children 之间共享道具，而无需将其显式传递给每个人。

Answer 3

您可以将这两个选项分配给一个变量，该变量包含两种组件类型的联合。

根据这些道具的来源，组合然后散布一个物体的道具也可能是有益的。如果它们取自地图内的 opt，则可能不需要第二步：

const LabelComponent = shouldRenderPlanA ? StyledLabelOptionOne : StyledLabelOptionTwo;

return (
  <>
    {options.map(option)}
    <StyledRow>
      {variousOptions.map((opt) => (
        <LabelComponent
          prop1={opt.prop1}
          prop2={opt.prop2}
        />
      ))}
    </StyledRow>
  </>
);

将相同的 Props 传递给多个 React 组件

Pass same Props to multiple React component

javascript

reactjs

react-props