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

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

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

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

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

dangerouslySetInnerHTML

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

function createMarkup() { return {__html: 'First {amp}amp;middot; Second'}; } function MyComponent() { return {amp}lt;div dangerouslySetInnerHTML={createMarkup()} /{amp}gt;; } 

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

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

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