使用react.js提供给浏览器的单个脚本文件创建页面

我试图像这样向客户端发送一行：

<script src="/js/app.js"></script>

这是有效的HTML5。

然后我想用 React.js 构建页面备份。例如（注意修改后的代码，我的简化代码中有一些错误），

React = require('react');
e = React.createElement;
App = React.createClass({
  render: function(){
    return e('html', null, 
            (e('head', null, 
              e('script', {src: '/js/app.js'})), 
            e('body', null, 'hello!')));
  }
});
React.render(e(App, null), document.documentElement);

生成的 DOM：

<html>
<head></head>
<body data-reactid=".0.0">hello!</body>
<body></body>
</html>

你不需要在 React 中构建 <html> 、 <head> 和 <body> 标签。如果收到的 HTML 文档中缺少它们，浏览器仍然会呈现它们。

您需要做的就是：

var React = require('react');
var App = React.createClass({displayName: "App",
  render: function(){
    return (
        React.createElement("h1", null, "Hello, World")
    );
  }
});
document.addEventListener("DOMContentLoaded", function(event) {
    React.render(React.createElement(App, null), document.body);
});

此外，与其尝试使用e = React.createElement这样的技巧，不如尝试使用使代码更具可读性的jsx：

var React = require('react');
var App = React.createClass({
  render: function(){
    return (
        <h1>Hello, World</h1>
    );
  }
});
document.addEventListener("DOMContentLoaded", function(event) {
    React.render(<App />, document.body);
});

相关内容

最新更新

热门标签：