javascript - 在React中使用脚本而不进行捆绑

我试图在我的React应用程序中使用JS视差库Rellax。

我已经通过npm下载了Rellax，并将Rellax导入了React组件。然后，Rellax的文档要求将rellax变量分配给新的Rellax构造函数，该构造函数将查询选择器作为参数。

像这样:

var rellax = new Rellax('.rellax');

但是，当我调用该组件时，会收到此错误:

Error: The elements you're trying to select don't exist.

但是，我确实在组件本身中使用了此类。

以下是完整的组件:

import React from 'react';
import Rellax from 'rellax';
import 'sample.css';

var rellax = new Rellax('.rellax');

const SampleComponent = () => {

  return (<div>
        <div className="rellax square"></div>
        <div className="rellax rectangle"></div>
      </div>);
}

export default SampleComponent;

有谁知道为什么这不起作用？

以下是Rellax文档的链接:https://github.com/dixonandmoe/rellax

谢谢!

最佳答案

加载该文件(即，由另一个组件导入)后，即会立即调用new Rellax('.relax')构造函数。但是，在加载文件时，显然尚未呈现该组件，因此.rellax元素不在DOM中。

相反，当您知道组件已渲染时，需要调用Rellax构造函数。这就是React的componentDidMount用于的目的。当组件已在DOM中呈现时将调用它(因此使用DOM元素的库可以找到所需的元素)。

import React from 'react';
import Rellax from 'rellax';
import 'sample.css';

class SampleComponent extends React.Component {
  componentDidMount() {
    // We can keep a reference to Rellax in case we need it later
    this.rellax = new Rellax('.rellax')
  }

  render() {
    return (
      <div>
        <div className="rellax square"></div>
        <div className="rellax rectangle"></div>
      </div>
    )
  }
}

export default SampleComponent