对具有不同数据的同一组件进行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. 剩余内容的价值| 内容的中值| 内容权的价值

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

任何帮助，将不胜感激

Answer 1

您可以使用复合组件模式解决这种情况

这是描述它的文章：

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