Question

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

<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>

Answer 1

您无需在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 try using 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);
});

使用react.js为浏览器创建包含单个脚本文件的页面

1 个答案: