ReactJs 错误：渲染后需要分号
[英]ReactJs error: semicolon expected after render
问题描述
I'm learning how to use ReactJs and I am at the very beginning.
我正在学习如何使用 ReactJs 而我才刚刚开始。
I have a HTML file which is simply this我有一个 HTML 文件，就是这个
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="mainReact.js"></script>
</body>
</html>
In the file mainReact.js this is my code在文件 mainReact.js 这是我的代码
import React from 'react';
import ReactDOM from 'react-dom';
class Test extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
ReactDOM.render(<Test />, document.getElementById('content'));
I get an error next to "render(){" it says:我在“render(){”旁边收到一个错误，它说：
Multiple markers at this line -primary expression expected -semicolon expected
Could you please tell me what I'm doing wrong?你能告诉我我做错了什么吗？
Thank you谢谢
3 个解决方案
解决方案1
1 2021-04-11 19:07:43
First of all the line is JSX首先是 JSX
<h1>Hello World!</h1>;
JSX will not be compiled directly by browsers, so you can transpile the code like JSX 不会被浏览器直接编译，所以你可以像这样编译代码
ReactDOM.render(
React.createElement('h1', {}, 'Hello World!')
, document.getElementById('content'));
Notice React.createElement('h1', {}, 'Hello World!') is the alternative version of <h1>Hello World!</h1> which browser understands natively.注意React.createElement('h1', {}, 'Hello World!')是浏览器本机理解的<h1>Hello World!</h1>的替代版本。
Thus you will need a transpiler to do that automatically, so use bable因此，您将需要一个转译器来自动执行此操作，因此请使用 bable
if you want to jump directly onto React and don't want to scratch your head with bundler and transpilers then its better to use如果您想直接跳到 React 并且不想用捆绑器和转译器挠头，那么最好使用
Create React App https://reactjs.org/docs/create-a-new-react-app.html创建 React 应用程序https://reactjs.org/docs/create-a-new-react-app.html
解决方案2
0 已采纳 2021-04-11 18:31:28
According to docs you have to use React.createElement .根据文档，您必须使用React.createElement 。
If you check console it throws error import outside of module , you cannot use import because js files are not interpreted as ES modules, you must add in the nearest package.json that type has module value.如果您检查控制台它import outside of module ，您不能使用导入，因为js文件不被解释为 ES 模块，您必须添加最近的package.json该类型具有module值。
Check my update code below.在下面检查我的更新代码。 Just change mainReact.js .只需更改mainReact.js 。
'use strict'
const e = React.createElement;
class Test extends React.Component {
render() {
return e('h1',null,'Hello World!');
}
}
ReactDOM.render(e(Test), document.getElementById('content'));
A much easier solution is to run command npx create-react-app my-app read here一个更简单的解决方案是运行命令npx create-react-app my-app在这里阅读
解决方案3
0 2021-04-11 19:07:41
You can run npm init command to create a package.json file and then install Babel and webpack using npm. You can run npm init command to create a package.json file and then install Babel and webpack using npm. that should be able to do it.那应该可以做到。 However that is a lot of work, I would suggest you to use create-react-app to create your project.然而这是很多工作，我建议你使用 create-react-app 来创建你的项目。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.