如何从模板和通过API请求的数据动态创建组件？

Question

该项目的目标是显示面板，可在后端自定义，所以我们从后端API接收模板和面板的数据，在客户端的组件没有预定义，我必须通过合并模板json和数据json，这是从API中获取的内容，我目前正在使用MustacheJS和react-mustache-template-component来实现这一点。我可以很容易地创建列表和简单的组件。

但问题来了，当创建具有交互性的组件时，不是简单的列表，而是可滑动的图形、图表和旋转木马；而Mustache模板并不能帮助我实现这一点，而且，由于我正在使用React -mustache template包，我只能在我的模板中使用纯HTML元素，自定义的React组件或库组件不起作用，我该如何解决这个问题呢？

或者有不同的方法来解决这个问题，模板的设计还没有解决，我选择了Mustache，因为它满足了我最初的用例，但现在面板的交互性越来越强。有没有不同的方法来解决这个问题？

Answer 1

• 如果所有的图形、图表和旋转木马看起来都一样:我会简单地写下代码。
• 如果不是，我会定义一些json结构来定义要做什么。单击按钮时显示警报的示例：

[
    {
        "identifier": "#button",
        "action": {
            "name": "click",
            "handler": {
                "type": "alert",
                "content": "clicked me!"
            }
        }
    }
]

在最后一种情况下，有eval函数，但强烈建议不要使用它。