Question

开始之前： -不能使用Node，jsx，扩展或其他任何东西（我的工作规则，对此我无能为力） -我需要参考其他脚本的HTML文件 -我有通天塔的问题...

我需要的是一个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

现在，现在，我知道您会告诉我导入/使用babel，但是如果我这样做并将“ text / babel”属性放在脚本标签中，则会出现此错误：“在'file中访问XMLHttpRequest CORS策略已阻止来自原始“空”的：//：// C：/Users/edunec/Desktop/wasd/like_button.js：CORS策略阻止了跨原始请求：协议，HTTP，数据，Chrome，Chrome扩展名，https。”

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

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

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

谢谢。

Answer 1

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

与index.html相同的文件夹中的like_button.js文件，当被浏览器访问时，将其视为不同域的文件（当使用完整路径时，例如-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>;

让我知道这是否可行。

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

1 个答案: