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