[Из песочницы] DOM-а хватит на всех, или как помирить ReactJS с тем фактом, что сторонние библиотеки меняют его DOM

Современные JavaScript фреймворки, и ReactJS не исключение, обычно требуют эксклюзивного доступа к DOM и им очень не нравится, когда кто-то без их ведома этот DOM меняет. Проблема в том, что существует огромное количество сторонних библиотек (например, плагины jQuery), которым необходимо в их подконтрольном поддереве что-нибудь да вропнуть, анвропнуть, перенести в другое место и т.д. Обычно в таких случаях мы видим в консольке нечто подобное: image

К счастью, эта проблема довольно легко и быстро решается. В этом посте я попробую изложить решение пошагово, но, если вам неинтересно, или вы спешите, просто поскрольте вниз к ссылке на гист с готовым решением. Итак, начнем.

Кто виноват? Допустим, мы хотим использовать в нашем ReactJS проекте какой-нибудь мега-крутой редактор текста, по типу AceEditor или TinyMCE. Этот плагин берет элемент и превращает его в , с тулбаром и хайлатом, и он может выглядеть, например, так: function textarea2editor (parent){ var $parent= jQuery (parent); var $editor = jQuery ('

'); $editor.css ('background',»#333»); $editor.css («color»,»#efefef»); $parent.find ('textarea').replaceWith ($editor); /*…*/ return { setText: function (text){ $editor.html (text); }, /*…*/ } } Допустим, у нас есть ReactJS приложение, которое выводит Unix команды с заданным интервалом:

var App = React.createClass ({ render: function () { return (