如何访问 React 组件的子节点以向它们添加包装器组件

Question

我有一个布局组件GridLayout，它接收一个反应组件WigdetsList。该组件是返回组件列表的功能组件。

我希望能够为列表中该组件的每个子节点添加一个包装器组件。

如果我使用{WigdetsList()} 而不是<WigdetsList /> 它会起作用，因为它变成了一个返回数组的函数。但如果可能的话，我希望能够在那里使用反应组件。因此它变成了一个独生子女。

我不想将<Col key={i} xs={12} lg={4}> 放在WidgetsList 中，因为我想分离关注点。布局组件用于进行布局和功能组件，不与特定布局组件耦合。

这里是代码框：https://codesandbox.io/s/suspicious-brown-u9yr1

应用：

function App() {
  return (
    <GridLayout>
      <WigdetsList />
    </GridLayout>
  );
}

小部件列表：

function WidgetsList() {
  return widgets.map(widget => (
    <StyledWidget key={widget.id}>widget {widget.id}</StyledWidget>
  ));
}

网格布局：

function GridLayout({ children }) {
  return (
    <Grid>
      <Row>
        {React.Children.map(children, (child, i) => (
          <Col key={i} xs={12} lg={4}>
            {child}
          </Col>
        ))}
      </Row>
    </Grid>
  );
}

感谢您的时间和帮助。

Answer 1

WidgetsList 不需要是 React 组件。它返回一个 React 组件列表，没有任何渲染逻辑。因此，它应该是App 本身内的函数或内联：

function App() {
  return (
    <GridLayout>
      {widgets.map(widget => (
        <StyledWidget key={widget.id}>widget {widget.id}</StyledWidget>
      ))}
    </GridLayout>
  );
}

如果WidgetsList 被呈现为一个表格——例如——那么应该在其中创建Col，因为组件现在关心它自己的布局。