使用 javascript 使用 react.js 更改 html答案

【问题标题】：Using javascript to change html using react.js使用 javascript 使用 react.js 更改 html
【发布时间】：2018-09-17 04:31:34
【问题描述】：

我正在尝试读取一个 HTML 文件 (client.html)，然后在 端口 8000 上进行监听。在那个 html 文件中，我还有一个 <script = "client.js"></script> 标签，这样我就可以使用 react.js（没有 jsx）来更改 HTML。到目前为止，我已经能够建立一个服务器，但是无论我如何更改 client.js 文件，这些更改似乎都不会显示在 http://localhost:8000/client.html。

server.js

//server.js
var http = require('http'),
    fs = require('fs');

fs.readFile('./client.html', function (err, html) {
    if (err) {
        throw err;
    }       
    http.createServer( async (request, response) => {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(8000,() => console.log("started.."));
});`

client.js

//client.js
class Hello extends React.Component {
    render() {
      return React.createElement('div', null, `Hello ${this.props.toWhat}`);
      }
}
ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>

<!-- client.html -->
<html>
	<body>
		<div id="root"></div>
		<p>helloworld</p>
		<!-- <script src="lib.js"></script> -->
		<script src="client.js"></script> 
	</body>
</html>

【问题讨论】：

标签： javascript html node.js reactjs

【解决方案1】：

我在你的 server.js 中做了一些修改。

var http = require("http"),
fs = require("fs");
var path = require("path");

http
   .createServer(function(request, response) {
      var filePath = "." + request.url;
      if (filePath == "./") filePath = "./client.html";

      var extname = path.extname(filePath);
      var contentType = "text/html";
      switch (extname) {
        case ".js":
          contentType = "text/javascript";
          break;
        case ".css":
          contentType = "text/css";
          break;
        case ".json":
          contentType = "application/json";
          break;
      }

      fs.readFile(filePath, function(error, content) {
        response.writeHead(200, { "Content-Type": contentType });
        response.end(content, "utf-8");
      });
    })
   .listen(8000, () => console.log("started..."));

基本上，您需要处理节点服务器中的 .js 文件。参考——https://developer.mozilla.org/en-US/docs/Learn/Server-side/Node_server_without_framework

【讨论】：