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

Question

我正在为 Reactjs 和组件渲染而苦苦挣扎。

基本上我在服务器上有常规的 html 模板，我试图将它们用作 React 的 JSX 组件。否则它工作得很好，但我无法触发事件，例如: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
);

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

这也严重限制了您在"template"中可以做的事情，并且会弹出各种其他问题。

tl;博士不要这样做

---

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