Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reactjs Render component dynamically based on a JSON config

I have a following config as JSON

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

In react rendercomponent, is it possible to pass the component name dynamically to react render.

for e.g in this rendercomponent instead of putting the ContentFormContent directly is it possible to pass the data from json config and i can loop or something.

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

SO i will have a list of pages in json config and based on the selection of particular nav i will render the component based on its 'type' from the json file

like image 273
V1n0d Avatar asked Dec 27 '13 07:12

V1n0d


2 Answers

The JSX

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

simply compiles to

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

so you can make that function call however you like. In this case, it's probably most convenient to make a list of all possible components and do something like

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

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

if component is an element from your example array.

like image 53
Sophie Alpert Avatar answered Sep 27 '22 23:09

Sophie Alpert


React.renderComponent() has been deprecated, to use React.render() https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html#deprecations

You may do something like:

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);
        });
    }
};
like image 33
Lei Niu Avatar answered Sep 27 '22 23:09

Lei Niu