Марципано + ReactJS?

Question

Кто-нибудь использовал Marzipano 360 Panorama Viewer в сочетании с приложением ReactJS?

У кого-нибудь есть идеи, как можно это сделать?

Одна мысль, которую я имел, состояла в том, чтобы, возможно, передать Marzipano виртуальной DOM-копии React ref исходному элементу DOM, однако я думаю, что Marzipano, скорее всего, добавит и удалит дополнительные элементы DOM в этом элементе, поэтому я думаю, что это может вступить в конфликт с руководством React. DOM и вызывают проблемы.

Другая идея состояла в том, чтобы визуализировать Marzipano в элементе вне корневого элемента ReactDOM, затем использовать обычный старый document.getElementById для доступа к нему и использовать CSS для наложения элемента Marzipano над приложением React, когда Панорама должна быть видимой.

И то, и другое - хакерство и далеко от идеала, поэтому, если у кого-то есть идеи получше, напишите.

(Обратите внимание, что это для личного побочного проекта, так что более хакерские идеи вполне подходят)

Answer 1

Возможно, хотя и несколько неуклюже, использовать React вместе с библиотеками, которые напрямую управляют DOM. Ваша первая идея находится на правильном пути, поскольку Интеграция с другими библиотеками объясняет интеграцию с JQuery:

[L] et's sketch обертка для универсального плагина jQuery.

Мы прикрепим ссылку на корневой элемент DOM. внутри componentDidMount, мы получим ссылку на него, чтобы мы могли передать его плагин jQuery.

Чтобы React не касался DOM после монтажа, мы вернемся пустой из метода render (). Элемент не имеет свойства или дети, поэтому React не имеет оснований для его обновления, оставляя плагин jQuery, свободный для управления этой частью DOM:

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.somePlugin();
  }

  componentWillUnmount() {
    this.$el.somePlugin('destroy');
  }

  render() {
    return <div ref={el => this.el = el} />;
  }
}