0

有人将Marzipano 360 全景查看器与 ReactJS 应用程序结合使用吗？

有没有人对如何做到这一点有任何想法？

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

另一个想法是在根 ReactDOM 元素之外document.getElementById的元素中渲染 Marzipano，然后使用常规 old来访问它，并在需要全景图可见时使用 CSS 将 Marzipano 元素覆盖在 React 应用程序上方。

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

（注意这是一个个人的副项目，所以更多的hacky想法是完全可以的）

4

1 回答 1

1

可以将 React 与直接操作 DOM 的库一起使用，尽管有些笨拙。您的第一个想法是正确的，因为与其他库集成解释了与 JQuery 集成：

[L] 让我们为一个通用的 jQuery 插件画出一个包装器。

我们将 ref 附加到根 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} />;
  }
}

于 2018-06-29T07:46:20.430 回答