React（HTML 文件）中出现意外的标记“<”答案

【问题标题】：Unexpected token '<' in React (HTML file)React（HTML 文件）中出现意外的标记“<”
【发布时间】：2019-12-26 07:53:05
【问题描述】：

开始之前： - 不能使用 Node、jsx、扩展或任何其他东西（我的工作规则，我无能为力） -我需要一个引用其他脚本的 HTML 文件 -我有 babel 的问题...

我需要的是一个引用其他脚本的 HTML 文件（不是 HTML 文件中的所有内容），并且能够在其中编写“普通”HTML...

所以，我有这个代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
    <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>
  </head>
  <body>
    <h1>HTML with multiple scripts using React.js</h1>
    <p>React.js without Node.js or any other thing</p>
    <p>React.js is loaded as script tags.</p>
    <div>
      <div id="like_button_container"></div>
      <div id="like_button_container2"></div>
    </div>
    <script src="like_button.js"></script>
    <script src="like_button2.js"></script>
  </body>
</html>

like_button.js ：

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

like_button2.js ：

'use strict';

const f = React.createElement;

class LikeButton2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return f(
      'h1',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer2 = document.querySelector('#like_button_container2');
ReactDOM.render(f(LikeButton2), domContainer2);

如你所见，我不能写“普通”的 HTML，我必须在引号内写...这确实是限制和丑陋的：

 return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );

如果我尝试编写“普通”HTML：

return e(
          <button>WASD</button>
        );

我收到错误：意外的令牌'

https://i.imgur.com/l7LkgIM.png

NOW NOW NOW，我知道你会告诉我导入/使用 babel，但如果我这样做并将“text/babel”属性放在脚本标记中，我会收到此错误：'Access to XMLHttpRequest at 'file :///C:/Users/edunec/Desktop/wasd/like_button.js' from origin 'null' 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension , https。'

https://i.imgur.com/wizCraW.png

请有人帮助我，正如我所说，我需要一个引用其他脚本的 HTML 文件（不是同一脚本中的所有内容），并且能够编写“普通”HTML...不能使用 Node 或 jsx或任何其他事情，必须以这种方式完成（工作规则）。

如果由于某种原因这是不可能的（怀疑），我需要知道如何在引号内编写 HTML 以及如何用它做更复杂的事情（比如一个元素在另一个元素中......），如果有人知道如何在父包装器中将两个脚本渲染到同一个 div，我也会很感激。

提前谢谢你。

【问题讨论】：

我做了，它给了我一个错误，我在我的帖子里说了两次。
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> - 我想你错过了。
我说我已经试过了，还是不行……
你试过 import babel 并在本地服务器上运行吗？ stackoverflow.com/a/52919513/5601899
至少你需要运行一个本地网络服务器而不是打开文件为file://...听起来你正试图用双手绑在背后来开发React，这肯定不是很有成效。如果这应该是你的工作，你真的应该确保你可以获得一个体面的开发环境。（我知道这可能不是很有帮助的建议……）

标签： javascript html reactjs

【解决方案1】：

2 个可行且有用的解决方案，您的限制可能/可能不允许：

文件 like_button.js 与 index.html 位于同一文件夹中，当被浏览器访问时，将其视为不同域的文件（当给出其完整路径时，如 - file:///../../ like_button.js)，因为它不在 index.html 文件中。因此，CORS 问题出现在这里。所以你最好在浏览器的不安全模式下打开文件 - 为此在关闭所有浏览器窗口后运行以下命令 - "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp .您应该能够成功使用该组件。
运行本地服务器。

您可能还想更改 like_button.js 中的代码：

更改return e(<button>WASD</button>); 到

return <button>WASD</button>;

让我知道这是否有效。

【讨论】：