javascript - ReactJS View 处理具有不同数据的同一组件

Question

我有一个对象数组，它使用映射进行迭代以显示数组内每个对象的值。

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. 左|剩余内容值(value)
2. 中|内容中间的值(value)
3. 对|内容权的值(value)

...在 1 列 View 中。

现在假设我希望它显示为单独的 3 列，然后我读取“名称”来决定它属于哪一列。所以它变成了这样:

1. 左侧内容的值(value) | 中间内容的值(value) | 右侧内容的值(value)

我的问题是，我应该渲染“Card”3次(这看起来是明显的解决方案)，但是如果我想在每个组件内进行API调用，但只在一侧使用它怎么办(仅左/中/右)。如何让它不被调用三次？

如有任何帮助，我们将不胜感激

Answer 1

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

这是一篇描述它的文章:

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