尝试在 html 中加载我的 Web 组件时出现意外标记“<”

Question

所以我试图创建一个反应 web 组件。 我将它包装起来，在 VSCode 上看起来不错，但是当我尝试加载它时，它给了我错误：行上出现意外的标记“<”：

ReactDOM.render(<Counter/>, mountPoint);

有谁知道为什么以及如何解决它？ 谢谢

这是我的网络组件：

import React from 'react';
import * as ReactDOM from 'react-dom';
import Counter from './counter';

class CounterWC extends HTMLElement {
    connectedCallback() {

        // Create a ShadowDOM
        const root = this.attachShadow({ mode: 'open' });

        // Create a mount element
        const mountPoint = document.createElement('div');

        root.appendChild(mountPoint);

        // You can directly use shadow root as a mount point
        ReactDOM.render(<Counter/>, mountPoint);
    }
}

customElements.define('counter-wc', CounterWC)

这是我的 html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-9" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>React webcomponent:</h1>
    <counter-wc></counter-wc>
    <script type="module" src="./counterWC.js"></script>
  </body>
</html>

Answer 1

回复：评论

您将文件命名为 *.js 并不意味着它是JavaScript

ReactDOM.render(<Counter/>, mountPoint); 是 JSX，不是JavaScript，它需要在构建步骤中转换为 JavaScript。

或者根本不使用 React：

 class CounterWC extends HTMLElement { constructor(){ super().attachShadow({mode: 'open'}).append(this.div = document.createElement('div')); } connectedCallback() { this.div.innerHTML = `Am I a counter?`; } } customElements.define('counter-wc', CounterWC);

 <counter-wc></counter-wc>

尝试在 html 中加载我的 Web 组件时出现意外标记“<”

问题描述

1 个解决方案

解决方案1
1 2023-01-25 17:08:15

尝试在 html 中加载我的 Web 组件时出现意外标记“<”

问题描述

1 个解决方案

解决方案1 1 2023-01-25 17:08:15

解决方案1
1 2023-01-25 17:08:15