Блог

Я работаю над приложением React , которое использует внешнюю библиотеку в Vanilla JS, которая создает элементы DOM, используя document.createElement(...) некоторые из этих данных, которые я хочу вставить в свои элементы React. Если у меня есть простое приложение:

 let sub = React.createElement('p', null, 'Made with React'),
    main = React.createElement('div', null, [sub])

React.render(main, document.getElementById('app'));
 

Он визуализируется вместе с содержимым <p data-reactid=".0.0">Made with React</p> . Если я попробую это document.createElement сделать вместо этого, ничего не отобразится.

 let sub = document.createElement('p');
sub.innerText = 'Not React';
let main = React.createElement('div', null, [sub])

React.render(main, document.getElementById('app'));
 

В настоящее время я нашел обходной путь с помощью dangerouslySetInnerHTML .

 let sub = document.createElement('p');
sub.innerText = 'Not React';
let main = React.createElement('div', {dangerouslySetInnerHTML: {__html: sub.outerHTML}});

React.render(main, document.getElementById('app'));
 

Что делает, но это не кажется безопасным. Как правильно добавлять HTMLElement в качестве дочерних элементов React?

dangerouslySetInnerHTML может безопасно использоваться с дезинфицирующими средствами HTML. Для предотвращения доступно множество библиотек XSS .

React.createElement() возвращает виртуальный объект dom javascript, document.createElement() возвращает объект dom. Мы используем объекты javascript для эффективного управления различиями и дорогостоящего обновления dom , мы не хотели бы возвращаться к элементам dom без явной необходимости,