Question

我似乎无法让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

坚持到那里:(

Answer 1

你应该写：

import WOW from 'wowjs';

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

注意WOW（）之前的WOW。

Answer 2

您可以这样导入它：

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

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

let WOW;

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

Answer 3

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

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调用。因此，只需使用“实时”选项provided by WOW.js禁用该错误：

import { WOW } from "wowjs";

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

现在应该不再有错误，动画将滚动播放。 Relevant GitHub issue here.

奖金：：与问题无关，但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
    }
  })
}

Credit to danielgoodwin97 for this simple fix.

ReactJS与wowJS无法正常工作

3 个答案: