Событие клика не работает для нативных элементов внутри ShadowDOM

Question

Я создаю расширение для Firefox, я вставляю его в страницу, используя Shadow dom.Как мы знаем, события реакции не работают в Shadow Dom, поэтому я использую пакет react-shadow-dom-retarget-events, чтобы перенаправить события в Shadow 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 от ваших компонентов (вызов метода рендеринга вашего компонента) во время обновления и (2) фактическое рендеринг обновлений DOM

Я думаю, вы должны прочитать больше о inline-function