Есть ли способ прикрепить события ReactJs к динамически вставленному HTML из ответа AJAX JSON?

Question

У меня есть компонент реагирования с кнопкой и div в нем. Этот div будет заполнен ответом ajax от сервера при нажатии на кнопку.

Ответ сервера в формате JSON, и одно из свойств JSON содержит строковое значение с содержимым HTML. Это значение свойства будет присвоено состоянию компонента.

В выводе я увидел, как на странице отображается необработанный HTML. Мне удалось добиться этого, работая с пакетом «response-render-html».

Теперь мне нужно прикрепить события к некоторым элементам HTML с определенным классом в них. В jQuery .on ('. Classname') используется для прикрепления событий к таким элементам. Есть ли способ, я могу добиться того же, используя React. Обработчик события должен быть методом внутри компонента.

Answer 1

Из документации React:

dangerouslySetInnerHTML

dangerouslySetInnerHTML является заменой React для использования innerHTML в браузер DOM. В общем, настройка HTML из кода рискованна, потому что легко непреднамеренно подвергать ваших пользователей межсайтовому скриптингу (XSS) атака. Таким образом, вы можете установить HTML прямо из React, но у вас есть опасно печатать SetInnerHTML и передавать объект с __html ключ, чтобы напомнить себе, что это опасно. Например:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Таким образом, ваш вызов API заполнит состояние какого-либо компонента или приложения, и вы передадите его как dangerouslySetInnerHTML опору для элемента.

Для обработчиков, специфичных для класса, я не уверен, что есть элегантное решение. Это начинает сильно «пахнуть», и, если возможно, вам следует переосмыслить реализацию HTML в базе данных.

Тем не менее, вы по-прежнему можете устанавливать обработчики событий для классов в нативном JavaScript без Jquery, и вы можете сделать это здесь. Вы должны быть осторожны с тем, что если ваше приложение / компонент повторно отобразит эти обработчики событий, они будут удалены. Если вы хотите пойти по этому пути, вам нужно будет тщательно управлять обработчиками HTML / событий, чтобы заново инициализировать себя при рендеринге, или управлять потоком рендеринга таким образом, чтобы они не перерисовывали, за исключением тех условий, которые вы считаете необходимыми. обязательно.