1

Сервер возвращает Handlebars шаблон и json с данными. С помощью реакта я хочу отобразить этот шаблон, предварительно распарсив его Handlebars:

module.exports = React.createClass({
    getInitialState: function () {
        return {
            previewData: {}, // json данные контекста
            previewHtml: {}  //  Handlebars шаблон
        }
    },

    getTemplateDataStore: function (event, previewData) {
        this.setState({
            previewData: previewData
        });
    },

    getTemplateHTMLStore: function (event, previewHtml) {
        this.setState({
            previewHtml: previewHtml
        });
    },

    render: function () {
        // парсинг шаблона
        var template = Handlebars.compile(this.state.previewHtml);
        var context = {"name": this.state.previewData);

        return <div className="row">
                   {template(context)}
               </div>  

    }   

});

Но, проблема в том, что реакт выводит строку, то есть Handlebars вернул к примеру "<div>John></div>", реакт так его и отобразил, а ведь нужно же, чтоб это был DOM элемент, в котором находится John.

И так же через раз появляется следующая ошибка:

Error: Invariant Violation: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

Подскажите пожалуйста, как правильно отобразить элемент, после парсинга барсом, чтоб не строка выводилась и как пофиксить ошибку?

1 ответ 1

2

Давайте по порядку.

Вставка HTML кода в компоненты React "как есть".


В React.js есть хитрый трюк, позволяющий вставлять HTML разметку в код компонентов как есть. Вам всего лишь нужно присвоить свойству dangerouslySetInnerHTML родительского тега JS объект специального вида. Об этом можно почитать в официальной документации. А вот пример того, как это можно сделать:

var App = React.createClass({
    render: function () {
        var markup = "<h1>Test</h1>";

        return (<div className="row" dangerouslySetInnerHTML={{__html: markup}}>
               </div>);
    }
});

React.render(<App />, document.getElementById('app'));

JSBin

Замечание: Использовать этот трюк следует с особой осторожностью, поскольку вы рискуете столкнуться с XSS. Да и вообще, использование шаблонизаторов в компонентах React это не React-way. Подумайте дважды перед тем, как тащить такое в реальные системы.

Периодически возникающая ошибка.


Что касается ошибки, то React недвусмысленно дает вам понять, что нельзя изменять состояние компонентов внутри метода render. Проверяйте все родительские компоненты на предмет явного или не явного изменения состояния компонентов. (В вашем примере, один из родительских компонентов вполне может вызывать getTemplateDataStore или getTemplateHTMLStore.)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.