Вопрос по reactjs, javascript – Компонент Reactjs Render динамически основан на конфигурации JSON

9

У меня есть следующий конфиг как JSON

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

В компоненте render render можно ли динамически передавать имя компонента для реакции render.

например, в этом компоненте рендеринга вместо непосредственного помещения ContentFormContent можно передать данные из конфигурации json, и я могу выполнить цикл или что-то в этом роде.

React.renderComponent(, body);

Так что у меня будет список страниц в конфигурации JSON и на основе выбора конкретной навигации я буду отображать компонент на основе его 'тип' из файла JSON

Ваш Ответ

2   ответа
3

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

    var ContentFormContent= React.createClass({
        render: function () {
            return (
                
            );
        }
    });

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

    if (type in allComponents) {

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

JSX


просто компилируется в

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

так что вы можете сделать этот вызов функции, как вам нравится. В этом случае этоВероятно, наиболее удобно составить список всех возможных компонентов и сделать что-то вроде

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

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

еслиcomponent это элемент из вашего примера массива.

Предупреждение: что-то вызывает компонент React напрямую. Вместо этого используйте фабрику или JSX. Увидеть:fb.me/react-legacyfactory mrvol
Большое спасибо ... Это сработало V1n0d
React.renderComponent сейчас .React.render free-soul

Похожие вопросы