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