Marzipano + ReactJS？

Question

是否有人将 Marzipano 360 Panorama Viewer 与 ReactJS 应用程序结合使用？

有没有人知道如何做到这一点？

我的一个想法是可能将 Marzipano React 虚拟 dom 的 ref 传递给原始 DOM 元素，但我认为 Marzipano 可能会添加和删除额外的 DOM 元素中的元素，所以我认为这可能与 React 对 DOM 的管理冲突并导致问题。

另一个想法是在根 ReactDOM 元素外部元素中呈现 Marzipano，然后使用常规旧 document.getElementById 访问它，并且当全景图需要可见时，使用 CSS 将 Marzipano 元素覆盖在 React 应用程序上方。

两者都很老套，远非理想，所以如果有人有更好的想法，请post。

（请注意，这是针对个人副项目的，因此可以接受更多奇思妙想）

Answer 1

虽然有些笨拙，但可以将 React 与直接操作 DOM 的库一起使用。正如 Integrating with other libraries 解释与 JQuery:

集成一样，您的第一个想法是正确的

[L]et’s sketch out a wrapper for a generic jQuery plugin.

We will attach a ref to the root DOM element. Inside componentDidMount, we will get a reference to it so we can pass it to the jQuery plugin.

To prevent React from touching the DOM after mounting, we will return an empty from the render() method. The element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the 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} />;
  }
}

Marzipano + ReactJS？

Marzipano + ReactJS?

javascript

reactjs

360-panorama