Функция передачи пользовательского элемента веб-компонента onClick

Question

Я хочу передать функцию в пользовательский элемент, используя ReactJS

ReactJS Component

import React from 'react';
import './SampleComponent';

export  class Button extends React.Component {

  handleClick = (event) => {
    console.log(event)
  }

  render() {

    return (
      <div>
        <sample-component onclick="handleClick"></sample-component>
      </div>
    )
  }
};

Пользовательский элемент

class SampleComponent extends HTMLElement {
  static get observedAttributes() {

  }

  // custom methods
  render() {
    this.innerHTML = `Custom Element`;
  }

  // lifecycle hooks
  connectedCallback() {
    this.render();
  }

}

window.customElements.define('sample-component', SampleComponent);

Как я понимаю, когда я передаю onclickфункция handleClick JS будет искать его в реализации Custom Element (поэтому я получаю сообщение об ошибке в консоли).Так как передать функцию?Я попытался "this.handle", но это также не сработало.

Answer 1

Из-за реакции Документация Ваш HTML должен выглядеть следующим образом

<sample-component onClick={handleClick}></sample-component>