Question

我有一个以下配置为JSON

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

在react rendercomponent中，是否可以动态传递组件名称以进行反应渲染。

例如，在这个rendercomponent而不是直接放置ContentFormContent是可以从json配置传递数据，我可以循环或东西。

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

所以我将在json配置中有一个页面列表，并根据特定导航的选择，我将基于其类型＆＃39;来呈现组件。来自json文件

Answer 1

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);

如果component是示例数组中的元素。

Answer 2

不推荐使用React.renderComponent（），以使用React.render（） https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html#deprecations

您可以执行以下操作：

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);
        });
    }
};

Reactjs基于JSON配置动态渲染组件

2 个答案: