单击事件不适用于ShadowDOM内部的本机元素

Question

我正在为Firefox创建扩展程序，我使用Shadow dom将其插入页面中。我们知道react事件在影子dom中不起作用，因此我使用react-shadow-dom-retarget-events包将事件重新定位到影子dom。

如果将事件附加到React组件然后附加到其中的本机组件，则此方法很好用，但这不适用于仅本机组件。

例如

<Button onClick={/*do something*/} />

在Button.js中

<button onClick={e=>this.props.onClick()}>Click</button>

可以工作，但是请遵循以下步骤：

<span onClick={e=>console.log('Test')}>Click</span>

将无法正常工作。我能够弄清楚是什么原因导致了这种现象，或者也可以将事件附加到本地dom元素上。

Answer 1

在React的上下文中，内联函数是React在“渲染”时定义的函数。人们经常会混淆React中“渲染”的两种含义：（1）在更新期间从组件中获取React元素（调用组件的render方法），以及（2）实际上将更新呈现给DOM

我认为您应该阅读有关inline-function

的更多信息