如何在React JSX中使用Stencil的EventEmitter？解决事件绑定失效问题

你遇到的问题确实是React合成事件系统和原生DOM事件之间的差异导致的——React的JSX语法对自定义Web Component的自定义事件支持并不友好，它会把onChanged这类写法当成普通属性传递，而不是绑定原生DOM事件监听。下面给你几种可行的解决方案：

方案一：手动通过addEventListener绑定事件 #

这是最直接的原生方式，利用React的useRef获取到Web Component的DOM实例，再通过useEffect添加事件监听：

import { useEffect, useRef } from 'react';

function App() {
  // 创建ref获取ui-input元素
  const inputRef = useRef(null);

  useEffect(() => {
    const handleChanged = (event) => {
      console.log('事件触发:', event);
    };

    const inputElement = inputRef.current;
    if (inputElement) {
      // 绑定原生DOM事件"changed"
      inputElement.addEventListener('changed', handleChanged);
      
      // 组件卸载时移除监听，避免内存泄漏
      return () => {
        inputElement.removeEventListener('changed', handleChanged);
      };
    }
  }, []); // 空依赖数组确保只执行一次

  return (
    <div className="App">
      <ui-input ref={inputRef} />
    </div>
  );
}

方案二：使用Stencil官方的React输出目标工具 #

如果你希望更贴合React的写法（比如直接用onChanged这类props），可以使用Stencil提供的@stencil/react-output-target工具，它会将你的Stencil组件转换成React兼容的包装组件。

步骤大致如下：

1. 在你的Stencil项目中安装依赖：

npm install @stencil/react-output-target --save-dev

2. 在stencil.config.ts中配置输出目标：

import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';

export const config: Config = {
  namespace: 'ui',
  outputTargets: [
    reactOutputTarget({
      componentCorePackage: '@your-scope/ui-components',
      proxiesFile: '../react-components/src/components.ts',
    }),
    // 其他输出目标...
  ],
};

3. 生成React包装组件后，在React项目中导入使用：

import { UiInput } from '@your-scope/react-components';

function App() {
  return (
    <div className="App">
      {/* 现在可以像普通React组件一样使用事件 */}
      <UiInput onChanged={(e) => console.log(e)} />
    </div>
  );
}

这种方式的好处是可以完全沿用React的事件写法，不需要手动处理DOM监听。

补充说明 #

为什么原生写法不生效？因为React的合成事件系统只处理标准HTML元素的标准事件（比如onClick、onChange），对于自定义Web Component的自定义事件，React不会自动将onChanged映射为原生的changed事件监听，而是会把它作为一个普通的属性赋值给元素，自然无法触发回调。

内容的提问来源于stack exchange，提问作者Mammad Mammadli