将 React 组件插入数组

Question

我有一个关于解决这个问题的最佳方法的问题。 所以我有一个名为<Banner/>的无状态组件，它只显示一个图像和一些文本。

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

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

我想将我的<Banner/>组件插入到此列表中的特定位置，最好是在呈现第一个<Group/> 。 我可以使用array.splice并将组件添加到数组中的特定位置，但它没有呈现在页面上，所以我显然在这里遗漏了一些东西。

最终结果将是这样的

<Group/>
<Banner/>
<Group/>
<Group/>
<Group/>
and so on

任何帮助，将不胜感激。

Answer 1

您可以创建一个 JSX.Elements 数组，例如

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

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

你可以渲染arr 。

Answer 2

您有多种方法可以实现这一目标。

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

CodeSandbox 上的实时示例https://codesandbox.io/s/bold-grass-p90q9

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>
  );
}

Answer 3

检查这个，让我知道这是否是你想要的

沙盒

https://codesandbox.io/s/crazy-lalande-mx5oz

//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>;
}