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

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 使用提供给浏览器的单个脚本文件创建页面

Create page with single script file given to browser using react.js

reactjs