javascript - 使用 javascript 使用react.js 更改 html

标签 javascript html node.js reactjs

我正在尝试读取 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>

最佳答案

我对您的 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..."));

基本上,您需要处理 Node 服务器中的 .js 文件。 引用-https://developer.mozilla.org/en-US/docs/Learn/Server-side/Node_server_without_framework

关于javascript - 使用 javascript 使用react.js 更改 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49704762/

相关文章:

javascript - 使用正则表达式解析 URI

php - 在 php 代码中插入复选框

javascript - 单击按钮后如何重定向到不同的页面?

javascript - 在javascript中将匿名函数作为参数传递

javascript - extjs 6 复选框组getValue

Javascript:对象构造函数中的字符串连接

javascript - 将数据存储到系统时 Electron 应用程序崩溃(应用程序退出代码 3221225477)

html - float 元素的奇怪行为似乎具有相对定位

javascript - DIV 显示/隐藏代码有问题吗?

node.js - Node.js 中发生错误时保持在同一页面