如何在 for 循环中渲染反应组件？ [复制]答案

【问题标题】：How to render react components in a for loop? [duplicate]如何在 for 循环中渲染反应组件？ [复制]
【发布时间】：2021-03-19 18:10:06
【问题描述】：

我想根据一个数字常量来渲染组件。

使用不会有问题的数组，但我没有解决常量的方法。

  const numberOfItems = 4;

  return (
      {/* The for loop should be here, with which 4 <Grid> components should then be rendered */}
        <Grid item xs={12} sm={6}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
        </Grid>
   )

【问题讨论】：

代替 for 循环，使用 lodash 库方法次。 jsx内部：{times(4, (idx) => <YourComponent />)}
我要结束这个问题，因为答案在数组的创建方式上会有所不同（这本身就是一个老问题），映射最终是相同的（返回一个带有 key 属性的 JSX如 React 文档中所述）。

标签： reactjs typescript react-redux jsx react-component

【解决方案1】：

您可以创建一个数组并对其进行映射：

const numberOfItems = 4;

return [...Array(numberOfItems).keys()].map((key) => (
  <Grid key={key} item xs={12} sm={6}>
    <TextField />
  </Grid>
));

有关创建数组的其他方法，请参阅 related question。

【讨论】：

【解决方案2】：

如果你使用 Lodash 之类的东西，你可以使用 _.times:

  return (
      {_.times(4, index =>
        <Grid item xs={12} sm={6} key={index}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
        </Grid>
      )}
   )

【讨论】：

【解决方案3】：

您可以使用new Array(numberOfItems).fill(0) 定义一个数组，其中包含基于常量的多个项目。如果您有动态数量的项目作为道具，您可以执行以下操作（使用 React.useMemo 仅在 numberOfItems 更改时生成一次 itemsArray）：

const Component = ({ numberOfItems }) => {

  const itemsArray = React.useMemo(() => {
     return new Array(numberOfItems).fill(0);
  }, [numberOfItems]);
    
  return (
   <div>
    {itemsArray.map((_, index) => (
       <Grid key={index} item xs={12} sm={6}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
       </Grid>
    ))}
   </div>
  );
}

否则，定义一个常量：

const numberOfItems = 4;
const itemsArray = new Array(numberOfItems).fill(0);

const Component = () => {

  return (
   <div>
    {itemsArray.map((_, index) => (
       <Grid key={index} item xs={12} sm={6}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
       </Grid>
    ))}
   </div>
  );
}

【讨论】：

【解决方案4】：

你可以使用数组构造函数

{Array.from(new Array(4)).map((_, i) => (
  <Grid key={i} item xs={12} sm={6}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
))}

【讨论】：