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

Question

我在 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. “表单”组件访问其子组件的道具，以便使用这些道具生成新组件。

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

Answer 1

我决定去掉 Form 组件，直接使用 FormGroupComponent 组件。通过这样做，我消除了使用其子道具的道具的需要，使代码更具可读性（虽然有点冗长）。以下是我所做的更改：&nbsp; &nbsp; &nbsp; &nbsp; <FormGroupComponent>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CheckboxAndPicker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={showTimeOne}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setCheckbox={setTimeOne}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TimePicker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...timePickerStyle}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </CheckboxAndPicker>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CheckboxAndPicker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={showTimeTwo}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setChecked={setTimeTwo}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TimePicker&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...timePickerStyle}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </CheckboxAndPicker>&nbsp; &nbsp; &nbsp; &nbsp; </FormGroupComponent>我认为这是对原始帖子中代码的改进，因为：我们已经删除了对 Form 组件的需求。我们已经消除了通过 Form 组件的子组件进行映射并在 Form 组件内获取 Form 组件的子组件的 props 的需要。我们不再将实际 TimePicker 组件未使用的新道具附加到 TimePicker 组件。在我看来，分解出 prop 的子项的用法使这段代码更加直接。因此我认为在父组件中调用子组件的 props 可能是一种反模式，因为它不必要地使代码复杂化。