我正在努力應對Reactjs和組件渲染。與ReactJS一起使用服務器端HTML模板

基本上我在服務器上定期使用html模板，我試圖將它們作爲JSX組件與React一起使用。否則，它工作得很好，但我無法觸發事件，例如：this.handleSubmit。

如何將加載的模板渲染爲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 
);

來源

2015-02-05 Heikki Mustonen

爲什麼？請包括這些模板之一的示例。 – FakeRainBrigand 2015-02-05 14:12:09

在代碼部分的頂部有一個模板文件的示例。 – 2015-02-05 14:24:19

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"}) 
)

您需要在render中執行此代碼，並使用正確的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這不是明顯被任何東西使用。當然，還有一個異步加載代碼的問題......我不想在這裏深究。

這也嚴重限制了你可以在你的'模板'中做什麼，並會出現各種其他問題。 ;

TL如果你想使用JSX服務器上的醫生不這樣做

：酷，你只需要一個JS運行時，和一個組成部分。 React.renderToString或React.renderToStaticMarkup將照顧實際給你有效的HTML。

來源

2015-02-05 14:48:59 FakeRainBrigand

感謝您的意見。我使用服務器端模板的原因是，我會從我的Django框架中獲得統一的i18n支持+一些額外的東西。最初的想法是在服務器上創建這些模板，然後渲染它們以查看React-views，最後填充必要的數據。所以模板已經準備好在服務器上了，我已經走過了JSX轉換器的低谷，它們可能在飛行中完成工作，例如：http://facebook.github.io/react/html-jsx。 html – 2015-02-05 14:51:55

這會很慢...... jsx編譯器不是非常高效，需要大量代碼才能運行。如何創建編譯爲js並用作django模板的JSX組件？例如'

{"{%trans something%}"}

';或者使用django的[在js中翻譯的建議]（https://docs.djangoproject.com/en/1.7/topics/i18n/translation/#internationalization-in-javascript-code） – FakeRainBrigand 2015-02-05 16:14:38

該模板應該使用React.renderToString()進行預編譯，然後該函數返回的HTML具有所有額外的DOM屬性，例如與客戶端進行協調所需的data-react-id。

這是因爲在你的模板的onSubmit={this.handleSubmit}沒有反應相關的數據，反應不關心/瞭解它。

React也可以使用React.renderToStaticMarkup（）函數渲染干淨的html而不會膨脹;

看一看http://facebook.github.io/react/docs/top-level-api.html#react.rendertostring

來源

2015-02-05 14:49:24 jmingov

與ReactJS一起使用服務器端HTML模板

回答

TL如果你想使用JSX服務器上的醫生不這樣做

相關問題