Question

我正在尝试在react组件中使用视差。我过去已经做到这一点。这也是一个MeteorJs项目

我收到控制台错误：

$（...）。视差不是函数

我的组件：

  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);   });

Materialise Css Parallex不是函数

1 个答案: