web - 如何使用 Web 组件触发 React 点击事件

Question

我已经用 WebComponent 渲染了 ReactComponent 但组件点击事件没有触发

有没有办法触发 WebComponent 呈现的 ReactComponent 事件？

一个简单的 React 组件

const event = () => {
  console.log('aaaaaa');
}

export const Component = ({message}) => {
  return (
    <button type={'button'} onClick={event}> {message} </button>
  ) 
};

在 WebComponent 渲染中调用它

export class ConfirmButton extends HTMLElement {
  connectedCallback() {
    const parent = document.createElement('div');
    const message = this.getAttribute('message');
    this.attachShadow({ mode: 'open' }).appendChild(parent);

    ReactDOM.render(<Component message={message} />, parent);
  }
}

假设单击按钮时控制台上应显示“aaaa”。

但是，没有显示结果...

标签： web