我正在努力应对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服务器上的医生不这样做

相关问题