Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   React: в поисках корня (https://javascript.ru/forum/misc/52239-react-v-poiskakh-kornya.html)

melky 09.12.2014 18:10
React: в поисках корня
 
я хочу заюзать компонент модального окна (jQuery плагин). содержимое компонента (потомки) передаются в модальное окно.

модальное окно (непосредственно HTML элемент) создается средствами jQuery - то бишь в обход виртуального DOM.

ну и React ругается на то, что потомки потеряли корневой элемент:
Код:
Invariant Violation: findComponentRoot(...): Unable to find element. This probably means the DOM was unexpectedly mutated
структура DOM дерева при этом какая-то такая:
<body>

    <div id="REACT ROOT"><!-- корневой элемент приложения --></div>

    <div class="modal"><!-- созданное модальное окно и потомки --></div>

</body>


кто сталкивался? как решать это дело?



... есть мысля: как-то создавать новый корневой элемент внутри модального окна, и там отрисовывать потомков. но вот что-то не могу додумать, как это делается)

melky 11.12.2014 20:24
UPD: нагуглил. паттерн называется "портал": https://github.com/rpflorence/react-...ibs.md#portals

ну и ещё у потомков должен быть один корень - можно взять <body>
// было
    var mountNode = document.getElementById('content');
// стало
    var mountNode = document.body;

(это то, над чем я тупил)

дэмка: http://jsbin.com/curiko/2

Примесь Portal для портала: GIST

Safort 11.12.2014 21:37
Похоже тут народ не очень жалует Реакт ;(

melky 11.12.2014 21:58
Цитата:
Сообщение от Safort (Сообщение 346126)
Похоже тут народ не очень жалует Реакт ;(
всему своё время :)

danik.js 12.12.2014 07:12
А че за "виртуальный дом"? Можно в двух словах? Это какая-то инновационная нанотехнология?

melky 12.12.2014 11:25
Цитата:
Сообщение от danik.js (Сообщение 346160)
А че за "виртуальный дом"? Можно в двух словах? Это какая-то инновационная нанотехнология?
это такая штука, которая позволяет писать SPA без мучений с SEO (виртуальное дерево может отображаться на сервере), а так же эта штука позволяет разруливать компоненты с вёрсткой, при этом оставаясь очень быстрой, с помощью частичного обновления: синхронизация с обычным DOM работает в DIFF режиме: например, если мы перерисовываем сраницу, но при этом поменялась только центральная часть (типичный ajax сайт), то в обычном DOM сменится только контент, а меню\шапка отрисовываться не будет. я думаю, плюсы такого частичного обновления очевидны

ну а вообще, лучше изучить это дело самому


Часовой пояс GMT +3, время: 22:24.