5

我似乎无法让wowJS工作。

我愿意import WOW from 'wowjs';

componentDidMount() {
  const wow = new WOW();
  wow.init();
}

但我明白了TypeError: _wowjs2.default is not a constructor

如果我做import { WOW } from 'wowjs';

我明白了

MutationObserver is not supported by your browser. WOW.js cannot detect dom mutations, please call .sync() after loading new content.

如果我做

componentDidMount() {
  const wow = new WOW();
  wow.sync();
}

注意wow.sync()

我明白了TypeError: Cannot read property 'nodeType' of undefined

卡在那里:(

4

3 回答 3

1

你应该写：

import WOW from 'wowjs';

componentDidMount() {
  const wow = new WOW.WOW();
  wow.init();
}

注意 WOW() 之前的 WOW。

于 2017-02-11T03:38:12.853 回答
1

导入 WOW.js 的正确方法（使用 安装后npm）是：

import { WOW } from "wowjs";

const wow = new WOW();
wow.init();

但正如你所说，浏览器给出了错误：

MutationObserver is not supported by your browser. WOW.js cannot detect dom mutations, please call .sync() after loading new content.

根据我在网上找到的，该sync函数用于在 JavaScript 框架进行一些动态更改后替换内容时重新初始化 wow.js。但是，只要您的新组件init在挂载后再次调用该函数，您就不需要该sync调用。因此，只需使用WOW.js 提供的“实时”选项禁用错误：

import { WOW } from "wowjs";

// your class declaration extending React.component...
componentDidMount() {
  const wow = new WOW({live: false}); // disables sync requirement
  wow.init()
}

现在应该不再有错误，并且动画将在滚动时播放。 相关的 GitHub 问题在这里。

奖励：与问题无关，但 WOW.js 的一个重要问题是它会破坏您的 SEO。该库使用visibility: hidden样式在动画进入之前将您的内容隐藏起来，但是机器人对此存在问题，因此，您的页面排名可能会较低。

解决此问题的一种简单方法是在页面未滚动时阻止 WOW.js 进行初始化。有了这个，机器人可以索引内容并且用户体验完全不受影响（除非你的屏幕顶部有 WOW 元素，在这种情况下用延迟的 CSS 动画替换它们）。

// bonus code that fixes potential SEO issues
import $ from "jquery";
import { WOW } from "wowjs";

// your class declaration extending React.Component...
componentDidMount() {
  const wow = new WOW({live: false}); // disables sync requirement
  var scrolled = false;
  $(window).on('scroll', function() { // jQuery to check for page scroll, you can replace this with an equivalent if you don't like using both jQuery and ReactJS at the same time
    if (!scrolled) {
      scrolled = true;
      wow.init(); // WOW.js initializes only once the page has scrolled
    }
  })
}

感谢 danielgoodwin97 完成了这个简单的修复。

于 2020-08-09T00:04:55.373 回答
0

您可以像这样导入它：

componentDidMount() {
  const WOW = require('wow.js');
  new WOW().init();
}

或者如果您想在任何地方使用它，请像这样定义它：

let WOW;

componentDidMount() {
  WOW = require('wow.js');
  new WOW().init();
}
于 2019-06-18T12:46:02.943 回答