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

【问题标题】：Is it an anti-pattern to use the props of your child components to render another component?使用子组件的 props 来渲染另一个组件是一种反模式吗？
【发布时间】：2021-01-20 15:48:30
【问题描述】：

我在 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>
...

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

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

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

【问题讨论】：

“无限个孩子”可能比“无限个孩子”更准确。
是的，这绝对是一种糟糕的处理方式。我想说Form 组件或CheckboxAndPicker 组件（或两者）应该跟踪哪些子项被选中/取消选中。 TimePicker 不需要知道它是否在 TimePicker 外部进行检查，并且为了调用其设置器而让一个组件进入另一个组件看起来不太好。跨度>

标签： javascript reactjs

【解决方案1】：

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

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

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

我们不再需要 Form 组件。
我们不再需要通过 Form 组件的子组件进行映射并在 Form 组件中获取 Form 组件子组件的 props。
我们不再为 TimePicker 组件附加实际 TimePicker 组件未使用的新道具。

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

【讨论】：