Materialise Css Parallex 不是一个函数

Question

我正在尝试在反应组件中使用视差。我过去已经让这个工作了。这也是一个 MeteorJs 项目

我收到控制台错误：

$(...).parallax 不是函数

我的组件：

  import React from 'react';
import $ from 'jquery';


export default class Index extends React.Component{
    render(){
        $(document).ready(function(){
            $('.parallax').parallax();
        });
        return(
          <div className="container">

              <div className="parallax-container">
                  <div className="parallax"><img src="images/parallax1.jpg"/></div>
              </div>
              <div className="section white">
                  <div className="row container">
                      <h2 className="header">Parallax</h2>
                      <p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background
                          content or image in this case, is moved at a different speed than the foreground content while
                          scrolling.</p>
                  </div>
              </div>
              <div className="parallax-container">
                  <div className="parallax"><img src="images/parallax2.jpg"/></div>
              </div>
          </div>
        )
    }
}

我的客户端 main.js 文件：

import '../imports/startup/client/routes';
import '../node_modules/materialize-css/dist/js/materialize.min';
import '../node_modules/materialize-css/js/parallax';

Answer 1

错误信息告诉你 .parallax() 不是这行代码中的函数：

`` $('.parallax').parallax(); ```

这意味着$('.parallax') 正在返回一个对象（通常是一个 html 元素）。 .parallax() 不是函数也就不足为奇了，因为它只是一个 html 元素。

查看文档，我认为您缺少此初始化代码：

  document.addEventListener('DOMContentLoaded', function() {
     var elems = document.querySelectorAll('.parallax');
     var instances = M.Parallax.init(elems, options);   });