将 React 组件插入数组答案

【问题标题】：Insert a React component into an array将 React 组件插入数组
【发布时间】：2020-06-05 18:42:17
【问题描述】：

我有一个关于解决此问题的最佳方法的问题。所以我有一个名为<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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript arrays reactjs ecmascript-6 react-component

【解决方案1】：

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

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

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

你可以渲染arr。

【讨论】：

【解决方案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>
  );
}

【讨论】：

【解决方案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>;
}

【讨论】：