时间戳

首页 > 解决方案 > 未捕获的 SyntaxError：预期的表达式，得到 '<'

javascript - 未捕获的 SyntaxError：预期的表达式，得到 '<'

问题描述

我试图通过使用反应在浏览器中显示“Hello World”

import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1>Hello World</h1>;

ReactDOM.render(myelement, document.getElementById('root'));
<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" href="#">
        <title>List</title>
    </head>
    <body>

        <div id="react"></div>

        <script type="module" src="script.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    </body>
</html>

但是，如帖子标题中所述，我不断收到错误消息。有没有办法解决这个问题？

标签： javascriptreactjs

解决方案

您必须添加babel才能使用JSX. 并且id根元素的 应该匹配函数id中的ReactDOM.render

<!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" href="#">
    <title>List</title>
  </head>
  <body>
    <div id="root"></div>
  
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"> 
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    <script type="text/babel">
      const myelement = <h1>Hello World</h1>;

      ReactDOM.render(myelement, document.getElementById('root'));
    </script> 
  </body>
</html>

推荐阅读