ReactJSON渲染组件基于JSON配置动态地

  • Z时代
  • 2024-01-10
  • 分类：问答

我有以下配置作为JSON

var componentConfig = {
content: { type: "ContentContent", data: "content"},
new_content: { type: "ContentFormContent", data: "content"}
}

在react rendercomponent中，是否可以动态传递组件名称以响应render。

例如，在此renderComponent中，而不是直接放置ContentFormContent，就可以从json配置传递数据，并且我可以循环或其他操作。

React.renderComponent(<ContentFormContent data={[componentConfig.new_content.data]} />, body);

所以我将在json配置中有一个页面列表，并基于特定导航的选择，我将根据json文件中的“类型”呈现组件

回答：

JSX

<ContentFormContent data={[componentConfig.new_content.data]} />

只需编译为

ContentFormContent({data: [componentConfig.new_content.data]})

因此您可以随意调用该函数。在这种情况下，列出所有可能的组件并执行类似的操作可能是最方便的

var allComponents = {
    ContentContent: ContentContent,
    ContentFormContent: ContentFormContent
};
// (later...)
React.renderComponent(allComponents[component.type]({data: component.data}), body);

if component是示例数组中的元素。

以上是 ReactJSON渲染组件基于JSON配置动态地 的全部内容， 来源链接： utcz.com/qa/429242.html

回到顶部