Question

我正在尝试构建一个像2D数组一样起作用和渲染的React组件，其中每个数组项都知道其位置，而不必手动声明每个项的位置。举两个例子：

const FirstExample = () => (
  <Table>
    <Column>
      <Cell>top left</Cell>
      <Cell>bottom left</Cell>
    </Column>
    <Column>
      <Cell>top right</Cell>
      <Cell>bottom right</Cell>
    </Column>
  </Table>
);

const SecondExample = () => {
  const columns = [
    ['top left', 'bottom left'],
    ['top right', 'bottom right']
  ];
  const RenderedColumns = () => (
    <>
      {columns.map(column => (
        <Column>
          {column.map(cell => <Cell>{cell}</Cell>)}
        </Column>
      ))}
    </>
  );
  return <Table><RenderedColumns/></Table>;
}

两个示例都应呈现为：

<div component="Table">
  <div component="Cell" column="0" row="0">top left</div>
  <div component="Cell" column="0" row="1">bottom left</div>
  <div component="Cell" column="1" row="0">top right</div>
  <div component="Cell" column="1" row="1">bottom right</div>
</div>

（请注意，Column组件不会呈现包装的div-并不是很重要）

我包括了两个示例，因为我能够通过遍历Table的子级（及其子级）并在React.Children数组中获取其索引来获得第一个示例。该方法在第二个示例中不起作用，因为RenderedColumns是Table的唯一直接子代。

我尝试使用上下文在添加Column时更改Table的计数器，依此类推，但到目前为止，我尝试过的每种方法总是以无限循环结束。

这似乎是一个非常简单的问题，但我完全感到困惑！

Answer 1

只需将列号和行号传递给Cell道具，例如

const RenderedColumns = () => (
  <>
    {columns.map((column, col) => (
      <Column>
        {column.map((cell, row) => <Cell column={col} row={row}>{cell}</Cell>)}
      </Column>
    ))}
  </>
);

如何在React组件树中渲染节点的位置？

1 个答案: