Использование серверных HTML-шаблонов с ReactJS

Question

Я борюсь с Reactjs и рендерингом компонентов.

В основном у меня есть регулярные html-шаблоны на сервере, и я пытаюсь использовать их как JSX-компоненты с React. В противном случае он работает нормально, но я не могу запустить события, например: this.handleПодтвердить.

Как визуализировать загруженный шаблон как элемент React?

//Template /index.html 
<form onSubmit={this.handleSubmit}> 
    <input type="text"> 
    <input type="submit" 
</form> 

//Template loader 
var App = React.createClass({ 
    componentDidMount: function() { 
     this.updateContent(); 
    }, 
    updateContent: function(){ 
     /** 
     * Loads the template from the server and sets 
     * a new state 
     */ 
     var url = this.props.source.slice(1); 
     $.get(url, function(result) { 
      var html = result; 
      if (this.isMounted()) { 
       this.setState({ 
        content: html 
       }); 
      } 
     }.bind(this)); 
    }, 
    handleSubmit: function(){ 
     console.log('Submit fired'); 
    } 
    render: function() { 
     var converter = new HTMLtoJSX({createClass: false}); 
     var jsx = '/** @jsx React.DOM */ ' + converter.convert(this.state.content); 
     return (
      <div> 
       {JSXTransformer.exec(jsx)} 
      </div> 
    ); 
}); 

React.render(
    <App source="#/index.html" />, 
    mountPoint 
); 

Answer 1

JSX не шаблоны для языка разметки , это расширение синтаксиса для языка JavaScriptпрограммирования. Здесь важное значение имеет различие.

Вам необходимо преобразовать JSX в JS (обычно это делается при создании проекта). Если изменить код, чтобы быть действительным JSX это выглядит следующим образом:

<form onSubmit={this.handleSubmit}> 
    <input type="text" /> 
    <input type="submit" /> 
</form> 

И когда проходят через JSX инструментов выход следующее выражение JavaScript.

React.createElement("form", {onSubmit: this.handleSubmit}, 
    React.createElement("input", {type: "text"}), 
    React.createElement("input", {type: "submit"}) 
) 

Вы должны выполнить этот код в визуализации, с правильным this контекстом. Вы можете сделать это, обернув выше в функции перед подачей его клиент:

function renderThingy(){ 
    React.createElement("form", {onSubmit: this.handleSubmit}, 
     React.createElement("input", {type: "text"}), 
     React.createElement("input", {type: "submit"}) 
    ) 
} 

И называя, что в визуализации:

render: function() { 
    return (
     <div> 
      {renderThingy.call(this)} 
     </div> 
    ); 
} 

Это, конечно, сбивает с толком, и это не очевидно, если handleSubmit используется чем угодно. Тогда, конечно, есть проблема загрузки кода асинхронно ... Я бы не стал вникать в это здесь.

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

Т.Л., д-р не делать этого

---

Если вы хотите использовать JSX на сервере: прохладном, вам просто нужно время выполнения JS и компонент. React.renderToString или React.renderToStaticMarkup позаботится о фактическом предоставлении вам действительного html.

Answer 2

Шаблон должен быть предварительно скомпилирован с использованием React.renderToString(), тогда html, возвращаемый функцией, имеет все дополнительные атрибуты DOM, такие как идентификатор обработки данных, необходимый для согласования с клиентом.

Это происходит потому, что onSubmit={this.handleSubmit} в шаблоне не имеет реагировать данные связанных, реагируют оленью кожу ухода/знают об этом.

Реакция может визуализировать чистый html также без раздувания с использованием функции React.renderToStaticMarkup();

Посмотрите здесь http://facebook.github.io/react/docs/top-level-api.html#react.rendertostring