Веб-компонент в приложении React - PullRequest
Новая
       16

Веб-компонент в приложении React

0 голосов
/ 18 июня 2020

В приложении React я хочу использовать веб-компонент при его использовании. Я получаю сообщение об ошибке

TypeError: не удалось создать «HTMLElement»: используйте оператор «новый», этот конструктор объекта DOM не может быть вызван как функция.

Я использовал веб-компонент в одном из своих проектов, где я отреагировал на версию 16.12, веб-компонент работает отлично, в то время как проект с версией React 16.13.1 показывает ошибку

I index. js Я импортировал веб-компонент.

Index. js file 

import "./webComponent/ImperativeCounter";

ReactDOM.render(
  <TranslateProvider translations={translations} defaultLanguage={"sp"}>
    <Provider store={store}>
      <MainApp />
    </Provider>
  </TranslateProvider>,
  document.getElementById("root")
);

mycomponent. js

      <section>
        <i-counter ref={counterElement}></i-counter>;
      </section>

веб-компонент 

class ImperativeCounter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open'});
    this.currentCount = 0;
    const templete=`
     <b>Count:</b> ${this.currentCount}`;
    this.shadow.innerHTML = template;
  } 
}
window.customElements.define("i-counter", ImperativeCounter);

1 Ответ

0 голосов
/ 18 июня 2020

Похоже, проблема с транспилированием. Сначала установите эти 2 плагина (если вы используете babel 6. *): 

npm i --save-dev babel-plugin-transform-es2015-classes babel-plugin-transform-custom-element-classes babel-preset-es2015

, затем попробуйте добавить их в свой webpack.config: 

{
  loader: 'babel-loader',
  options: {
    presets: ['es2015'],
    plugins: ['transform-custom-element-classes', 'transform-es2015-classes']
  },
}
...