Обработка представления ReactJS для одного и того же компонента с разными данными

Question

У меня есть массив объектов, который итерировал, используя карту, чтобы показать уважающее значение каждого объекта в массиве.

arrOfObj = [
  {name:"left",value:"Value of content left"},
  {name:"mid",value:"Value of content mid"},
  {name:"right",value:"Value of content right"}
]

Допустим, у меня есть компонент "Карта", который получает массив объектов из реквизита, а затем отображает полученное значение реквизита в виде строк каждого ключа и объекта.

1. Слева | Значение содержания осталось
2. Середина | Ценность контента середина
3. Право | Значение содержания право

... в виде 1 столбца.

Теперь позвольте мне сказать, что я хотел, чтобы он отображался как отдельный 3 столбец, и я прочитал «имя», чтобы решить, к какому из них он принадлежит. Так стало так:

1. Значение содержимого слева | Значение содержимого в середине | Значение содержимого справа

Мой вопрос заключается в том, должен ли я отображать «Карту» 3 раза (что выглядит как очевидное решение), но что если я хотел сделать вызов API внутри каждого компонента, но использовал его только на 1 стороне ( только левое / среднее / правое) Как сделать так, чтобы он не вызывался трижды?

Любая помощь будет оценена

Answer 1

Вы можете решить этот случай с помощью шаблона составного компонента

Вот статья, которая описывает это:

https://blog.logrocket.com/guide-to-react-compound-components-9c4b3eb482e9