对具有不同数据的同一组件进行ReactJS视图处理

Question

我有一个对象数组，该对象数组使用map进行迭代以显示数组中每个对象的对应值。

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

假设我有一个组件“ Card”，它从props接收对象数组，然后将接收到的props值渲染为每个键和对象的行。

1. 左|剩余内容的价值
2. 中|内容的价值
3. 右|内容权的价值

...在1列视图中。

现在让我说我想让它显示为单独的3列，然后阅读“名称”来确定其所属的名称。这样就变成了：

1. 剩余内容的价值 | 中间内容的价值 | 右边内容的价值

我的问题是，我是否应该渲染“卡片” 3次（这看起来是显而易见的解决方案），但是如果我想在每个组件内部进行API调用，而只在一侧使用它，那该怎么办（左/中/右）。如何使其不被调用三次？

任何帮助将不胜感激

Answer 1

您可以使用复合组件模式

解决这种情况

这里是描述它的文章：

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