Как распарсить данные с помощью React.js?

Question

[Isaac Clark]

С сервера приходят следующие данные: html(чтоб отобразить теги, я написал div на русском): "див{{name}}/див" и приходит json {"name": "Vasya"} Вопрос: как с помощью ректа мне распарсить эти данные и отобразить див Vasy /див? Делаю так:

module.exports = React.createClass({
     getInitialState: function () {
         return {
            previewData: {}, // здесь приходит {"name":"Vasya"}
            previewHtml: {}  // здесь html "<div>{{name}}</div>"
    },
    getTemplateDataStore: function (event, previewData) {
        this.setState({
            previewData: previewData
        });
    },

    getTemplateHTMLStore: function (event, previewHtml) {
        this.setState({
            previewHtml: previewHtml
        });
    },
    render: function () {
        return // ?????????? как отоброазить <div>Vaysa</div>? 
    }
    },
});

Comments

[Денис Инешин]

А что вам мешает на сервере превратить неправильный <div>{{name}}</div> в правильный <div>{this.state.name}</div>?

[Денис Инешин]

Вам реально нужно всего лишь переделать шаблоны, которые хранятся на сервере, а не мучиться, пытаясь их превратить в другие на лету каждый раз.

[Isaac Clark]

Денис Инешин: к сожалению не могу, поэтмоу и мучаюсь и ищу способы решения. Думал, что реакт способен на такое. Что придется использовать хэндлбарс для этого?

[Денис Инешин]

Isaac Clark: тут вам нужен не handlebars, а регулярное выражение, которое будет преобразовывать {{ANY}} в {this.state.ANY}

[Isaac Clark]

Денис Инешин: не думаю, что подойдет, так как приходит шаблон в формате хэндлбарс, а там ведь не только {{var}} есть но и цикли , if

[Isaac Clark]

Isaac Clark: я вот сделал так
componentDidMount: function () {
var template = Handlebars.compile(this.state.previewHtml);
var context = this.state.previewData;
var html = template(context);
}
но у меня почему то this.state.previewHtml и this.state.previewData - пустые, а если в render их смотрю, то все ок, ,но если хэндлбарс в рендер добавляю, то ошибку выводит, только в componentDidMount, как быть в таком случае, подскажите пожалуйста?

[Isaac Clark]

Денис Инешин: вот такую ошибку пишет, если в рендере хэндлбарс вызываю : 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.

[Денис Инешин]

Isaac Clark: потому что вы неправильно пользуетесь реактом. Зачем вы его взяли вообще? Тем более что ваши шаблоны в Handlebars. Переходите на Ember.js, он для этого идеален и производительность у него отличная.

[Isaac Clark]

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

[Денис Инешин]

Isaac Clark: раз начальство сказало, то вы должны: 1. Изучить реакт, а именно Flux-way, 2. Озвучить свои требования по переходу. И в этих требованиях в первую очередь будет вынос шаблонов с сервера и размещение их в реактовских компонентах. Потому что реакт либо работает как надо, либо не работает.

[Isaac Clark]

Денис Инешин: шаблоны должны редактироваться пользователем и сохранятся на сервере. Они динамически, поэтому хранить на бэкэнде не получится

[Isaac Clark]

Денис Инешин: а react для java есть? который нормально работает?

Answer 1

[vsuhachev]

Вообще динамические шаблоны и реакт не очень совместимы т.к. реакт использует виртуальный DOM и не ожидает от вас того что вы будете что-то менять в реальном DOM

Видимо один из возможных путей - переписать шаблоны под react-style и компилить их в js-код. Код будет выглядеть как-то так:

function template() {
	            return react.createElement(
	                'div',
	                null,
	                react.createElement(
	                    'h1',
	                    { className: 'text-danger' },
	                    'Page not found'
	                ),
	                react.createElement(
	                    'p',
	                    null,
	                    'This page does not exist'
	                )
	            );
	        }

Потом грузить его динамически и выполнять, а результат вставлять куда-то во внутрь обычных компонентов.
Но это как мне видится просто адский гемор, как минимум все зависимости (react и т.п.) каким-то образом должны быть видны из вашего шаблона, скорее всего их придется вытащить в глобальные переменные.