Stencil JSX 侦听器抛出异常

Question

我正在尝试使用此处描述的 JSX 事件监听策略： https://stenciljs.com/docs/events#using-events-in-jsx

然而，当我在我的 JSX 中设置事件侦听器时，出现以下错误：

Type '{ ref: (el: HTMLElement) => ISubflow; onButtonStateChange:
(ev: CustomEvent<ButtonState>) => void; }' is not assignable to type
 'MyComponentAttributes'. Property 'onButtonStateChange' does
 not exist on type 'MyComponentAttributes'.

MyComponent 具有此事件定义：

@Event() onButtonStateChange: EventEmitter<ButtonState>;

JSX 看起来像这样：

<my-component
            ref={(el)=> this.currentSubflow = (el as unknown) as ISubflow}
            onButtonStateChange={(ev:CustomEvent<ButtonState>) => this.onButtonStateChanged(ev)} />

Answer 1

天哪，这是鬼鬼祟祟的~！

JSX 事件遵循命名约定！我所要做的就是改变

@Event() onButtonStateChange: EventEmitter<ButtonState>;

到

@Event() buttonStateChange: EventEmitter<ButtonState>;

并且 Sencil/JSX 内容将 on 添加到事件前面以监听它！

Stencil JSX 侦听器抛出异常

Stencil JSX listener throwing exception

stenciljs