反应组件中的动态子项

Question

我在JSON数据集的页面上渲染组件 - 类似于

[
  {
    "name": "compA",
    "label": "CompA Label"
  },
  {
    "name": "compB",
    "children": [
      {
        "name": "compC"
      }
    ]
  }
]


renderElements = elements => {
  elements.map(element => {
    // get component based on name
    let Component = getComponentByName(element.name);
    return (
      <Component>
        {element.children && renderElements(elements.children)}
      </Component>
    );
  });
};

我有一个类似于上面的伪代码的代码，它根据JSON数据集动态呈现组件。但是，在某些情况下，JSON数据集会在页面上多次加载，并且有些情况下第二个/第三个数据集中的某个名称与第一个数据集中的名称匹配，在这种情况下，我需要重新使用已从第一个数据集渲染的组件，并将子项动态合并/注入已渲染的组件。

最好的方法是什么？

1. 合并reducer中的数据集并始终只渲染合并的数据集？从概念上讲，这听起来更好但由于某些其他复杂性，这似乎对我不起作用，所以我正在寻找替代方案。
2. 在某个地方保留一个引用组件，如果找到相同的名称，以某种方式调用addChildren（）或类似的东西？
3. 别的什么？

这几乎就像我需要一个单例组件实例，如果已经渲染，应该重新使用它。但由于这种做法不受欢迎，我正试图找到正确的方法来做到这一点。任何帮助，将不胜感激。提前谢谢。