如何通过 React JS 中的索引将反应组件推送到映射数组数据中答案

【问题标题】：how to push react component inside a mapped array data by index in React JS如何通过 React JS 中的索引将反应组件推送到映射数组数据中
【发布时间】：2020-08-05 17:36:35
【问题描述】：

我最近在做一个 react 项目，我必须在页面上显示一些项目（这将是来自 api 的数据），并且在它们之间，我必须显示一个广告组件。有没有简单的方法可以做到这一点？

【问题讨论】：

是的，有可能，你有我可以使用的代码吗？
你应该把这个问题改成：我们如何展示一些物品元素和它们之间的广告，而不是问是否可能。

标签： javascript arrays reactjs

【解决方案1】：

我认为关注 sn-p 会对你有所帮助。

const Ad = () => <div> ad item </div>;
const itemsArrays = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const firstSix = itemsArrays.splice(0, 6);

const List = () => {
  let [topItems, setTopItems] = useState(firstSix);
  let [bottomItems, setBottomItems] = useState(itemsArrays);

  return (
    <>
      {topItems.map((item, index) => (
        <div> {item.title} </div>
      ))}{" "}
      <Ad />{" "}
      {bottomItems.map((item, index) => (
        <div> {item.title} </div>
      ))}{" "}
    </>
  );
};

【讨论】：

【解决方案2】：

是的，您可以呈现一个项目元素数组，并在它们中间呈现一个广告元素。

const Ad = () => (<div>ad item</div>)
const List = () => {
let [items, setItems] = useState(['item 1', 'item 2'])
return (
<>
  {
  items.filter((item, index) => index < 6)
    .map((item, index) => (<div>{item.title}</div>))
  }
  {<Ad />}
  {
  items.filter((item, index) => index >= 6)
    .map((item, index) => (<div>{item.title}</div>))
  }
</>
)
}

【讨论】：

@ParsaBadri خواهش :دی