我正在使用 nodeJS 和 React。
在我使用的 Node 中安装 React。
npm install --save react react-dom
这是我的 index.html 文件
<html>
<head>
<script src="Script/script.jsx" type="text/babel"></script>
</head>
<body>
<div id="ExperimentForm"></div>
</body>
</html>
脚本.jsx
从“ react ”中导入 react ； 从“react-dom”导入 ReactDOM；
var FormComponent = React.createClass({
render :function(){
return(<h2>Hello World</h2>);
}
})
ReactDOM.render(<FormComponent />, document.getElementById("ExperimentForm"));
我试过用
var express = require('express');
var app = express();
但这也不起作用。
我的 app.js 是
var SwaggerExpress = require('swagger-express-mw');
const express = require('express');
const app = express();
const path = require('path');
var config = {
appRoot: __dirname // required config
};
app.use(express.static(path.join(__dirname, 'views')));
app.get('/index', function (req, res) {
console.log("index page");
res.sendFile(path.join(__dirname + '/views/index.html'));
});
console.log(path.join(__dirname + '/views/index.html'));
SwaggerExpress.create(config, function (err, swaggerExpress) {
console.log("Starting server");
if (err) {
throw err;
}
swaggerExpress.register(app);
const port = 11011;
const server = app.listen(port, function () {
console.log('Server started @ %s!', port);
});
});
在谷歌开发者工具中我没有看到任何错误，它似乎加载了 index.html 但没有在浏览器中显示任何内容。
最佳答案
您不能使用import 来获取react 和react-dom。您必须使用来自其 cdn 的 script 标签显式导入它们。此外，要启用 jsx 的解析，您还需要 babel-core。只需从 script.jsx 中删除 import 语句，您的 index.html 应该如下所示
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" type="text/javascript"></script>
</head>
<body>
<div id="ExperimentForm"></div>
<script src="Script/script.jsx" type="text/babel"></script>
</body>
</html>
关于node.js - ReactDOM.render 不渲染组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47617589/