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

Question

我最近在做一个 react 项目，我必须在页面上显示一些项目（这将是来自 api 的数据），并且在它们之间，我必须显示一个广告组件。是否有捷径可寻？

标签： javascriptarraysreactjs

Answer 1

我认为以下代码段会对您有所帮助。

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>
      ))}{" "}
    </>
  );
};