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

Question

我有以下配置为 JSON

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

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

例如，在这个渲染组件中而不是直接放置 ContentFormContent 是否可以从 json 配置传递数据，我可以循环或其他东西。

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

所以我将在 json 配置中有一个页面列表，并根据特定导航的选择，我将根据 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);

ifcomponent是示例数组中的一个元素。

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