Javascript 将React组件插入数组中

我有一个关于最好的解决办法的问题。所以我有一个无状态组件，名为，它只显示一个图像和一些文本

然后我有一个对象数组，它在我的网站主页上生成一个功能列表。这个listGroups数组中大约有15个对象，因此它一个接一个地呈现15个组件。代码如下所示

  {listGroups.map((group, i) => (group?.assets?.length > 0) && (
     <Group key={group.id} {...group} showTitle={i !== 0} large={i === 0} />
  ))}

---

任何帮助都将不胜感激。

您可以创建JSX元素数组

const arr: JSX.Elements[] = [];

listGroups.forEach((group, i) => {
  if(i == 1) arr.push(<Banner/>);
  // add your Groups
})

---

您可以渲染arr.

您可以创建JSX元素数组

const arr: JSX.Elements[] = [];

listGroups.forEach((group, i) => {
  if(i == 1) arr.push(<Banner/>);
  // add your Groups
})

---

您可以渲染arr.

您可以通过多种方法来实现这一点

在React中，您可以在JSX中呈现元素数组，就像任何其他变量一样。若您希望基于来自api的一些数据呈现组件，那个么您也可以映射数据并将数据传递给组件。在这两种情况下都需要key属性，以便React知道结构何时更改

CodeSandbox上的实时示例

---

你有各种方法来实现这一点

在React中，您可以在JSX中呈现元素数组，就像任何其他变量一样。若您希望基于来自api的一些数据呈现组件，那个么您也可以映射数据并将数据传递给组件。在这两种情况下都需要key属性，以便React知道结构何时更改

CodeSandbox上的实时示例

---

检查一下，如果这是你想要的，请告诉我

沙箱

---

检查一下，如果这是你想要的，请告诉我

沙箱

const List = [
  <MyComponent key="one" text="im 1st!" />,
  <MyComponent key="two" text="im 2nd" />,
  <MyComponent key="three" text="im 3rd" />
];

const data = [
  { text: "1st string" },
  { text: "2st string" },
  { text: "3st string" }
];

export default function App() {
  return (
    <div className="App">
      <h3>Render array</h3>
      {List}
      <h3>Map from data</h3>
      {data.map(({ text }) => (
        <MyComponent key={text} text={text} />
      ))}
    </div>
  );
}

//Have taken limit as 10 for demo
export default function App() {
  function print() {
    let group = [];
    for (let i = 0; i <= 10; i++) {
      group.push(<Group key={i} />);
    }
    group.splice(1, 0, <Banner/>);// adding Banner at 1st index
    return group;
  }
  return <div>{print()}</div>;
}