Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 08.04.2019, 21:43
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,709

Сообщение от NeonMan
canvasRoot
canvasRoot является ссылкой на представителя HTMLElement, который соответствует виртуальному элементу <div id="app" ref="canvasRoot" />;(это синтаксический сахар для React.createElement("div", { id: "app", ref: "canvasRoot" });). Т. е. canvasRoot указывает на настоящий элемент, вставленный в DOM, который и передаётся в new DotAnimation(canvasRoot);

Сообщение от NeonMan
Не очень понимаю что делает canvasRoot где то есть подробное описание этого?
Это название придумал я, вы можете назвать как угодно! Это значение атрибута ref указывается у React элемента React.createElement("div", { id: "app", ref: "canvasRoot" });

И затем вызов ReactDOM.findDOMNode(this.refs.canvasRoot); указывает на настоящий элемент, соответствующий React элементу.

Последний раз редактировалось Malleys, 08.04.2019 в 21:52.
Ответить с цитированием
  #12 (permalink)  
Старый 08.04.2019, 21:53
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 112

А вот же работает и без React ref

https://codesandbox.io/s/o1jyymlq49

Последний раз редактировалось NeonMan, 08.04.2019 в 22:02.
Ответить с цитированием
  #13 (permalink)  
Старый 08.04.2019, 21:59
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 112

Я понял, с помощью этой строчки
const canvasRoot = ReactDOM.findDOMNode(this.refs.canvasRoot);

Указываем на элемент из ДОМ для функции.
Но мне кажется такую строчку написать легче, не?
document.querySelector("#animation")

Или бывают случаи где подход через ref оправдан?

Последний раз редактировалось NeonMan, 08.04.2019 в 22:02.
Ответить с цитированием
  #14 (permalink)  
Старый 08.04.2019, 22:03
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,709

Сообщение от NeonMan
А вот же работает и без React ref, выходит он не нужен?
Да, работает и не работает, как надо, вы не сможете использовать этот компонент более одного раза, поскольку document.querySelector("#app") указывает на один и тот же элемент.

document.querySelector("#app") ищет элемент, зачем вам его искать, когда вы его сами создаёте.

Чтобы это правильно работало вам нужно это компонент изолировать от остальной части DOM при помощи Shadow DOM API...

Я думаю, если вы решили использовать React.js, то нужно использовать все его возможности, а не только часть, а остальное пытаться изобрести заново. Да, ссылка на настоящий элемент может быть нужна, и такая возможность предоставляется!

Последний раз редактировалось Malleys, 08.04.2019 в 22:07.
Ответить с цитированием
  #15 (permalink)  
Старый 08.04.2019, 22:12
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 112

А зачем компонент изолировать от основного DOM ?
Указывать на элемент через ref я то не против, просто хочется знать в чем разница. Тем более что в этом варианте каждый раз нужно подключать к компоненту => import ReactDOM from "react-dom";

Последний раз редактировалось NeonMan, 08.04.2019 в 22:15.
Ответить с цитированием
  #16 (permalink)  
Старый 08.04.2019, 22:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

Malleys,
можно ли пример где document.querySelector("#app") не работает?
Ответить с цитированием
  #17 (permalink)  
Старый 08.04.2019, 22:48
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,709

Вот пример, где ещё не было React-а, тот самый мой первый пример https://codepen.io/Malleys/pen/XQNpXK

Тут класс DotAnimation может использоваться много раз, для каждого элемента свой селектор
new DotAnimation(document.getElementById("app"));
new DotAnimation(document.getElementById("app2"));


Если вы замените "app2" на "app", то второй не будет работать.

Сообщение от рони
можно ли пример где document.querySelector("#app") не работает?
Так ещё один React элемент Home создайте... вот добавил второй к примеру с ref https://codesandbox.io/s/m7o21ym6pj работает, как ожидается

пример с document.querySelector("#app") https://codesandbox.io/s/rryjlyjrr4 работает, не так как ожидается

Обратите внимание, что сanvas вставлен не туда!

Сообщение от NeonMan
А зачем компонент изолировать от основного DOM ?
Именно для того, чтобы не происходило такого, что разные элементы разных компонент перепутаны.

Сообщение от NeonMan
Тем более что в этом варианте каждый раз нужно подключать к компоненту => import ReactDOM from "react-dom";
он импортируется только один раз, это ссылка на один и тот же ReactDOM
Ответить с цитированием
  #18 (permalink)  
Старый 08.04.2019, 23:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

Сообщение от Malleys
Обратите внимание, что сanvas вставлен не туда!
спасибо, сам это не заметил.
Ответить с цитированием
  #19 (permalink)  
Старый 08.04.2019, 23:21
Аватар для NeonMan
Кандидат Javascript-наук
Отправить личное сообщение для NeonMan Посмотреть профиль Найти все сообщения от NeonMan
 
Регистрация: 22.07.2018
Сообщений: 112

Спасибо за подробный ответ
Ответить с цитированием
  #20 (permalink)  
Старый 08.04.2019, 23:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,763

Сообщение от NeonMan
есть ли на этом форуме ветка с React JS ?
на данный момент такого подразела нет, есть Библиотеки/Тулкиты/Фреймворки
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
автоматическое удаление скоупа директивы при удаление dom узла FanAizu Angular.js 0 25.08.2015 21:38
Вопрос. Обращение к DOM элементам в фоне. sibirser Events/DOM/Window 2 20.07.2015 17:38
DOM доформированный из JS не получает скрипт. arachnoz Events/DOM/Window 0 24.07.2014 21:13
Вопрос о циклических ссылках (JavaScript -> Dom -> JavaScipt) BlueIce Events/DOM/Window 10 17.02.2010 20:58
Вопрос по объектам и DOM Hawk Events/DOM/Window 3 14.05.2008 14:04