在 HTML Uncaught SyntaxError 中反應：意外的標記“<”

Question

我正在嘗試將 React 工作到我的 HTML 頁面中，我正在嘗試從引導程序創建動態卡，但我一直在得到這是我到目前為止所擁有的

服務.html

<head>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="services-load"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

  <script type="module" src="rjs.js"></script>
</body>

rjs.js

const e = React.createElement;
import Card from "./services/Cards";

const domContainer = document.querySelector('#services-load');
ReactDOM.render(e(<Card />), domContainer);

卡片.js

import Card from "./CardUI";
import img1 from "../assets/imgs/services/botox.jpg";
import img2 from "../assets/imgs/services/lipo.jpg";
import img3 from "../assets/imgs/services/prp.jpg";

const Card = props => {
  return (
    <div className="container aesthetic-body">
      <div className="row">
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <Card imgsrc={img1}/>
        </div>
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <Card imgsrc={img2}/>
        </div>
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <Card imgsrc={img3}/>
        </div>
      </div>
    </div>
  );
}

export default Card;

卡片UI.js

const Card = props => {
  return (
    <div className="card">
        <a href="">
          <div className="card-header">BOTOX / FILLERS</div>
          <img className="card-img-top" src={props.imgsrc} alt={"Card image cap"}/>
        </a>
      </div>
  );
}

export default Card;

更新：這是我的文件結構

Answer 1

為了使用import ，您需要通過在<script />上指定plugins來添加一個用於轉換transform-es2015-modules-umd的plugins 。

假設您有以下結構：

public
 - foo.js
 - index.js
 - index.html

foo.js導出一個簡單的組件，如下所示：

export default () => <div>Foo</div>;

index.js是關於導入和 boostrap 的：

import Foo from "foo";

ReactDOM.render(<Foo />, document.getElementById("root"));

最后，在index.html注冊模塊：

<script
  data-plugins="transform-es2015-modules-umd"
  type="text/babel"
  src="./foo.js"
></script>
<script
  data-plugins="transform-es2015-modules-umd"
  type="text/babel"
  src="./index.js"
></script>
</body>

這是index.html完整代碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script
      src="https://unpkg.com/react@16/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
      crossorigin
    ></script>

    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./foo.js"
    ></script>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./index.js"
    ></script>
  </body>
</html>

還有codesanbox鏈接： https ://codesandbox.io/s/quizzical-bird-vwn5t ? file =/ public/index.js

Answer 2

你不能在 js 文件上寫 HTML。 您需要切換到 jsx ( Javascript XML ) 文件格式。

將文件重命名為Cards.js => Cards.jsx和CardUI.js => CardUI.jsx

Answer 3

我認為您需要一個 babel 轉譯器來翻譯 JSX 語法。

https://babeljs.io/

反應： https : //babeljs.io/docs/en/babel-preset-react

在 HTML Uncaught SyntaxError 中反應：意外的標記“<”

問題描述

3 個解決方案

解決方案1
1 已采納 2020-09-06 12:41:39

解決方案2
0 2020-09-06 11:34:09

解決方案3
0 2020-09-06 11:38:59

在 HTML Uncaught SyntaxError 中反應：意外的標記“&lt;”

問題描述

3 個解決方案

解決方案1 1 已采納 2020-09-06 12:41:39

解決方案2 0 2020-09-06 11:34:09

解決方案3 0 2020-09-06 11:38:59

在 HTML Uncaught SyntaxError 中反應：意外的標記“<”

解決方案1
1 已采納 2020-09-06 12:41:39

解決方案2
0 2020-09-06 11:34:09

解決方案3
0 2020-09-06 11:38:59