【问题标题】:ReactJS view handling on same component with different dataReactJS 在具有不同数据的相同组件上处理视图
【发布时间】:2019-06-08 01:19:35
【问题描述】:

我有一个对象数组,它使用 map 进行迭代以显示数组内每个对象的尊重值。

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. 右 |内容权利的价值

...在一列视图中。

现在假设我希望它显示为单独的 3 列,并且我阅读了“名称”来确定它属于哪一列。所以它变成了:

  1. 左侧内容的价值 | 中间内容的价值 | 右侧内容的价值

我的问题是,我是否应该将“卡片”渲染 3 次(这看起来像是显而易见的解决方案),但是如果我想在每个组件内进行 API 调用,但只在一侧使用它呢(仅左/中/右)。如何让它不被调用三遍?

任何帮助将不胜感激

【问题讨论】:

  • 如何为name 值写一个条件,并基于它,您可以将数据分成3 列?
  • 这确实是一个解决方案,但是我使用“卡片”组件调用一个只有“左”需要的API,然后使用这个解决方案,它会被调用3次

标签: javascript reactjs react-redux


【解决方案1】:

你可以用复合组件模式

解决这个问题

这是一篇描述它的文章:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-06-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-18
    • 1970-01-01
    相关资源
    最近更新 更多