我正在尝试基本的React应用,并且正在尝试使React运行。 index.ejs中有一个包含内容的div标签。最初,我在server.js文件中将内容设置为“ ...”。当我添加React代码时,在源文件夹中的index.js文件中,div标签中显示的值应该更改,但是没有改变。请帮助
server.js:
import config from './config';
import apiRouter from './api';
import express from 'express';
import fs from 'fs'
const server = express();
server.set('view engine','ejs');
server.get('/',(req,res) => {
res.render('index', {
content: '....'
});
});
server.use('/api', apiRouter);
server.use(express.static('public'));
server.listen(config.port,() => {
console.info('Express listening on port', config.port)
});
index.ejs:
<%- include('header') -%>
<div id ="root"><%- content -%></div>
<%- include('footer') -%>
header.ejs:
<!doctype html>
<html>
<head>
<title>Hello EJS+</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
</html>
footer.ejs:
<script type="/bundle.js" charset="utf-8"></script>
</body>
</html>
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
React.createElement('h2',null,'Hello React'),
document.getElementbyId('root')
);
答案 0 :(得分:1)
正确的是document.getElement B yId('root')。
如果仍然无法正常工作,请检查您的index.js
和'react'/'react-dom'lib文件是否正在页面(bundle.js)中加载。
此外,请始终在浏览器的开发人员工具中检查控制台,以防前端出现错误。