Javascript 基于JSON配置动态地反应JS呈现组件

我有一个JSON配置

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

在react rendercomponent中，是否可以动态传递组件名称以进行react render

例如，在这个rendercomponent中，不直接放置ContentFormContent，而是可以从json配置传递数据，我可以循环或其他方式

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

React.renderComponent（，body）；

因此，我将有一个json配置中的页面列表，并根据特定nav的选择，根据json文件中的“类型”呈现组件

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

所以你可以随意调用这个函数。在这种情况下，最方便的方法可能是列出所有可能的组件并执行以下操作

var allComponents = {
    ContentContent: ContentContent,
    ContentFormContent: ContentFormContent
};

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

如果

component

是示例数组中的元素。

React.renderComponent（）已被弃用，请使用React.render（）

你可以这样做：

var loadReactModule = function ($root, type, data) {
    var ContentContent= React.createClass({
        render: function () {
            return (
                <input type="text" placeholder="My Module-Input"/>
            );
        }
    });

    var ContentFormContent= React.createClass({
        render: function () {
            return (
                <form></form>
            );
        }
    });

    var allComponents = {
         ContentContent: ContentContent,
         ContentFormContent: ContentFormContent
    };

    if (type in allComponents) {

        $root.each(function (index, rootElement) {
            React.render(React.createElement(allComponents[type]), {data:data}, rootElement);
        });
    }
};

var loadReactModule=function（$root、type、data）{
var ContentContent=React.createClass({
渲染：函数（）{
返回(
);
}
});
var ContentFormContent=React.createClass({
渲染：函数（）{
返回(
);
}
});
var allComponents={
ContentContent:ContentContent，
ContentFormContent:ContentFormContent
};
如果（输入所有组件）{
$root.each（函数（索引、根元素）{
render（React.createElement（allComponents[type]），{data:data}，rootElement）；
});
}
};

非常感谢……它起作用了警告：有东西正在直接调用React组件。使用工厂或JSX代替。请参阅：

React.renderComponent

现在是

React.render

。

var loadReactModule = function ($root, type, data) {
    var ContentContent= React.createClass({
        render: function () {
            return (
                <input type="text" placeholder="My Module-Input"/>
            );
        }
    });

    var ContentFormContent= React.createClass({
        render: function () {
            return (
                <form></form>
            );
        }
    });

    var allComponents = {
         ContentContent: ContentContent,
         ContentFormContent: ContentFormContent
    };

    if (type in allComponents) {

        $root.each(function (index, rootElement) {
            React.render(React.createElement(allComponents[type]), {data:data}, rootElement);
        });
    }
};