Внешний сценарий должен изменить InnerHTML компонента React - PullRequest
Новая
       79

Внешний сценарий должен изменить InnerHTML компонента React

0 голосов
/ 09 апреля 2019

Мой выпуск

У меня есть форма, встроенная в React, которая импортируется на страницу php. Форма является единственной частью страницы, встроенной в React. У меня нет контроля над другими элементами на странице. Мне нужно иметь возможность загрузить «Печать» в форму от Digicert для проверки SSL-сертификата на сайте. Моя форма будет использоваться в нескольких свойствах, принадлежащих моей компании, поэтому мне нужно передать props компоненту Seals, который устанавливает специфичный для сайта id в форме. Digicert проверяет этот идентификатор вместе с некоторыми другими данными для асинхронной загрузки собственного внешнего скрипта, который добавляет изображение печати как innerHTML к div с ожидаемым id, а также всплывающий скрипт к изображению.

Работало

В более ранней версии формы я жестко программировал id, Component был функциональным компонентом без сохранения состояния, который даже не обрабатывал реквизиты. Смотрите ниже: 

function Seals() {
  return (
    <div id="seals">
      <div id="hard-coded-value" data-language="en">
        <a href="https://www.digicert.com/ev-multi-domain-ssl.htm"></a>
      </div>
        {...other seals}
    </div>
   )
}

export default Seals

Внешний сценарий digicert успешно изменял innerHTML элемента div с жестко заданным значением.

... но при создании динамического сбоя

Однако мне нужно сделать эту динамику, чтобы принимать разные значения идентификатора на основе реквизитов, переданных в форму. Когда я добавляю динамическое значение, я думаю, что React предотвращает обновление или просто возвращает его обратно к оригиналу, так как он распространяет компонент. Многие реквизиты передаются в форму, поэтому она может оцениваться много раз, а изменение innerHTML переопределяется. На самом деле у меня были печати один раз после обновления, но я не мог заставить его повториться.

См обновленный компонент, с id prop: 

function Seals({id}) {
  return (
    <div id="seals">
      <div id={id} data-language="en">
        <a href="https://www.digicert.com/ev-multi-domain-ssl.htm"></a>
      </div>
        {...other seals}
    </div>
   )
}

Кто-нибудь может подумать об обходном пути? Я правильно диагностирую эту проблему? Есть предложения?

...