时间戳

首页 > 解决方案 > 使用子组件的 props 来渲染另一个组件是一种反模式吗？

javascript - 使用子组件的 props 来渲染另一个组件是一种反模式吗？

问题描述

我在 React 中有一个组件可以接收不定数量的子组件，它使用这些子组件生成另一个组件，其中包含原始子组件。关键是用一个装饰其功能的新组件包装原始子组件。代码如下所示：

const Form = ({ children }) => (
  <FormGroupComponent>
    {children.map(child => (
    <CheckboxAndChild
      checked={child.props.checked}
      setCheckbox={child.props.setCheckbox}
    >
      {child}
    </CheckboxAndPicker>
  ))}
  </FormGroupComponent>
);

const CheckboxAndPicker = ({ checked, setCheckbox, children }) => (
  <div>
    <div>
      <Checkbox
        checked={checked}
        onChange={() => setCheckbox(!checked)}
      />
    </div>
    <div>{checked && children}</div>
    <div/>
  </div>
);

这两个功能组件可以这样使用：

...
        <Form>
          <TimePicker
            {...timePickerProps}
            checked={showTimeOne}
            setChecked={setTimeOne}
          />
          <TimePicker
            {...timePickerProps}
            checked={showTimeTwo}
            setChecked={setTimeTwo}
          />
        </Form>
...

我发现这段代码有两点奇怪：

  1. “TimePicker”组件通常没有“checked”和“setChecked”属性，并且不会对这些属性本身做任何事情。这些道具仅用于在“表单”组件中呈现“CheckboxAndPicker”组件。
  2. “表单”组件访问其子组件的道具，以便使用这些道具生成新组件。

这是一种反模式，还是在使用新道具装饰现有组件并使用这些新道具生成新组件时可以接受这种功能？

标签： javascriptreactjs

解决方案

我决定去掉 Form 组件，直接使用 FormGroupComponent 组件。通过这样做，我不再需要使用其子 props 的 props，从而使代码更具可读性（尽管更冗长）。以下是我所做的更改：

        <FormGroupComponent>
          <CheckboxAndPicker
            checked={showTimeOne}
            setCheckbox={setTimeOne}
          >
            <TimePicker
              {...timePickerStyle}
            />
          </CheckboxAndPicker>
          <CheckboxAndPicker
            checked={showTimeTwo}
            setChecked={setTimeTwo}
          >
            <TimePicker
              {...timePickerStyle}
            />
          </CheckboxAndPicker>
        </FormGroupComponent>

我认为这是对原始帖子中代码的改进，因为：

  1. 我们消除了对 Form 组件的需求。
  2. 我们不再需要通过 Form 组件的子组件进行映射，并在仍在 Form 组件中时获取 Form 组件子组件的 props。
  3. 我们不再将新的道具附加到 TimePicker 组件上，这些道具未被实际的 TimePicker 组件使用。

在我看来，考虑到 prop 的子项的使用使这段代码更加简单明了。因此，我认为在父组件中调用子组件的 props 可能是一种反模式，因为它不必要地使代码复杂化。

推荐阅读