как pu sh реагировать на компонент внутри сопоставленного массива данных по индексу в React JS

Question

Недавно я работал над реакционным проектом, в котором мне нужно отображать несколько элементов на странице (это будут данные из api), а между ними я должен отображать рекламный компонент. есть ли простой способ сделать это?

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

Answer 2

Да, вы можете отобразить массив элементов item и элемент рекламы в середине из них.

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