ReactJS - визуализировать внешний элемент DOM с событиями

Question

Я использую ReactJS 16.13.1, и теперь я хочу визуализировать внешний элемент DOM с его событиями.

Итак, давайте предположим, что существует

<button type="button" id="testBtnSiri" onclick="alert('Functionality exists');">Testbutton Siri</button>

Который был сгенерирован библиотекой (с некоторыми другими событиями).

Теперь я хочу: скопировать его (с событиями) и визуализировать этот элемент в моей функции рендеринга ReactJS.

Каков наиболее подходящий способ сделать это?

Я не ищу ReactDOM.createPortal ().

Я хочу показать внешний элемент DOM с его событиями в моем компоненте React.

Answer 1

Чтобы использовать HTML в вашем коде React, вам нужно использовать dangerouslySetInnelHTML prop в элементе.

function libraryReturnedHTML() {
  return '<button type="button" id="testBtnSiri" onclick="alert('Functionality exists');">Testbutton Siri</button>'
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={__html: libraryReturnedHTML} />;
}

Однако вы должны знать, что это делает ваш код уязвимым для XSS-атак. Чтобы предотвратить такой сценарий ios, рекомендуется сначала продезинфицировать ваш HTML, чтобы у вас были только нужные сценарии и теги ссылок. Для дезинфекции html вы можете просто использовать обычные Javascript функции и document.createTreeWalker

Вы также можете использовать существующую библиотеку для дезинфекции вашего HTML. Например, sanitize-html Однако санитарная обработка - это всего лишь дополнительная мера предосторожности.

Answer 2

Создайте оболочку над Node.addEventListener(), которая будет перехватывать все прослушиватели событий, добавленные к кнопке, когда она отображается другой библиотекой. Это может выглядеть так (этот код должен быть выполнен до того, как внешняя библиотека создаст кнопку):

let ael = Node.prototype.addEventListener
let eventListeners = []
Node.prototype.addEventListener = function(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void {
  if((this as HTMLElement).id === "buttonID")
    eventListeners.push({type, listener, options})
  this.addEventListener = ael
  this.addEventListener(type, listener, options)
}

Создайте компонент реакции с помощью вашей кнопки - вы можете создать новый или ввести, используя опасноSetInner Html. Передайте массив eventListeners как опору. При монтировании и размонтировании компонента добавьте / удалите прослушиватели событий для вашей кнопки.

function ClonedButton({eventListeners}: any){
  useEffect(()=>{
    eventListeners.forEach((el) => document.getElementById("my-migrated-new-button")!.addEventListener(el.type, el.listener, el.options));
    return () => {
      eventListeners.forEach((el) => document.getElementById("my-migrated-new-button")!.removeEventListener(el.type, el.listener, el.options));
    }
  }, [])
  return <button id="my-migrated-new-button"></button>
}