Question

我正在尝试在我的React应用程序中使用Rellax，一个JS视差库。

我已经通过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

谢谢！

Answer 1

只要加载该文件（即由另一个组件导入），就会调用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

在React中使用脚本而不捆绑

1 个答案: