Вставьте компонент React в массив

Question

У меня есть вопрос о лучшем способе go по этому поводу. Итак, у меня есть компонент без состояния <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/> компонент в этот список в определенной позиции c, в идеале после того, как первый <Group/> отрендерен. Я могу использовать array.splice и добавить компонент в указанную c позицию в массиве, но он не отображается на странице, поэтому я явно что-то здесь упускаю.

Конечный результат будет чем-то как это

<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

Проверьте это и дайте мне знать, если это то, что вы хотите

Песочница

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

Answer 3

У вас есть несколько способов добиться этого.

В React вы можете визуализировать массив элементов внутри JSX, как и любую другую переменную. Если вы хотите sh визуализировать компоненты на основе данных, поступающих из API, вы также можете отобразить свои данные и передать данные компоненту. Свойство «ключ» требуется в обоих случаях, поэтому 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>
  );
}