时间戳

首页 > 解决方案 > ReactJs 错误：渲染后需要分号

javascript - ReactJs 错误：渲染后需要分号

问题描述

我正在学习如何使用 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(){”旁边收到一个错误，它说：

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

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

谢谢

标签： javascriptreactjs

解决方案

首先是 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

推荐阅读