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