tl; dr不要这样做

Question

我正在努力使用Reactjs和组件渲染。

基本上我在服务器上有常规的html模板，我试图将它们用作React的JSX组件。否则它工作正常，但我无法触发事件，例如： this.handleSubmit。

如何将加载的模板呈现为React-element？

//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被任何东西使用，那就不明显了。当然，还有异步加载代码的问题......我不想在这里深入研究。

这也严重限制了您在“模板”中的功能，并会弹出其他各种问题。

tl; dr不要这样做

如果你想在服务器上使用JSX：很酷，你只需要一个JS运行时和一个组件。 React.renderToString或React.renderToStaticMarkup将负责实际为您提供有效的HTML。

Answer 2

模板应该使用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

在ReactJS中使用服务器端HTML模板

2 个答案:

tl; dr不要这样做