时间戳

首页 > 解决方案 > React（HTML 文件）中出现意外的标记“<”

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

问题描述

开始之前： - 不能使用 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”属性放在脚本标记中，我会收到此错误：'在 'file:// 访问 XMLHttpRequest /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，我也会很感激。

先感谢您。

标签： javascripthtmlreactjs

解决方案

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

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

此外，您可能想更改 like_button.js 中的代码：

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

return <button>WASD</button>;

让我知道这是否有效。

推荐阅读