Webcomponent自定義元素傳遞函數onClick

Question

我想使用ReactJS將函數傳遞給自定義元素

ReactJS組件

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時，它將在“自定義元素”實現中進行搜索（這就是為什么在控制台中出現錯誤）。 那么如何傳遞函數呢？ 我嘗試了"this.handle"但是也沒有用。

Answer 1

由於反應文檔，您的html看起來應該像這樣

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