ReactJs 错误：渲染后需要分号

Question

我正在学习如何使用 ReactJs 而我才刚刚开始。

我有一个 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>

在文件 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'));

我在“render(){”旁边收到一个错误，它说：

此行有多个标记 - 预期主要表达 - 预期分号

你能告诉我我做错了什么吗？

谢谢

Answer 1

首先是 JSX

<h1>Hello World!</h1>;

JSX 不会被浏览器直接编译，所以你可以像这样编译代码

ReactDOM.render(
React.createElement('h1', {}, 'Hello World!')
, document.getElementById('content'));

注意React.createElement('h1', {}, 'Hello World!')是浏览器本机理解的<h1>Hello World!</h1>的替代版本。

因此，您将需要一个转译器来自动执行此操作，因此请使用 bable

如果您想直接跳到 React 并且不想用捆绑器和转译器挠头，那么最好使用

创建 React 应用程序https://reactjs.org/docs/create-a-new-react-app.html

Answer 2

根据文档，您必须使用React.createElement 。

如果您检查控制台它import outside of module ，您不能使用导入，因为js文件不被解释为 ES 模块，您必须添加最近的package.json该类型具有module值。

在下面检查我的更新代码。 只需更改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'));

一个更简单的解决方案是运行命令npx create-react-app my-app在这里阅读

Answer 3

You can run npm init command to create a package.json file and then install Babel and webpack using npm. 那应该可以做到。 然而这是很多工作，我建议你使用 create-react-app 来创建你的项目。

ReactJs 错误：渲染后需要分号

问题描述

3 个解决方案

解决方案1
1 2021-04-11 19:07:43

解决方案2
0 已采纳 2021-04-11 18:31:28

解决方案3
0 2021-04-11 19:07:41

ReactJs 错误：渲染后需要分号

问题描述

3 个解决方案

解决方案1 1 2021-04-11 19:07:43

解决方案2 0 已采纳 2021-04-11 18:31:28

解决方案3 0 2021-04-11 19:07:41

解决方案1
1 2021-04-11 19:07:43

解决方案2
0 已采纳 2021-04-11 18:31:28

解决方案3
0 2021-04-11 19:07:41