Question

我有一个gatsby项目，我正在尝试使用react-materialize（视差组件）。它可以编译，但是我得到ReferenceError：尝试使用视差组件时未定义$。

ReferenceError: $ is not defined
Parallax.componentDidMount
C:/Users/Albert/Documents/Albert Site/v2/node_modules/react-materialize/lib/Parallax.js:41
  38 | _createClass(Parallax, [{
  39 |   key: 'componentDidMount',
  40 |   value: function componentDidMount() {
> 41 |     $('.parallax').parallax();
  42 |   }
  43 | }, {
  44 |   key: 'render',

materialize-css也无法正常工作。我试图在我的componentdidmount（）函数中使javascript中的materialize-css组件失效，这也无法正常工作。

这是我的使用方式：

pages / index.js：

import React from 'react'
import styled from 'styled-components'
import 'jquery'
import 'materialize-css/dist/js/materialize.js'
import 'materialize-css/dist/css/materialize.css'
import { Parallax } from 'react-materialize'
import city from '../assets/city.png'
import city2 from '../assets/city.jpg'

class IndexPage extends React.Component {
  render() {
    return (
      <section className="section">
        <div>
          <Parallax imageSrc={city} />
          <div className="section white">
            <h2>Parallax</h2>
            <p>hellloooooo</p>
          </div>
        </div>
      </section>
    )
  }
}

export default IndexPage

layout / index.js

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import styled from 'styled-components'
import y from '../assets/y.png'
import Nav from '../components/nav'
import 'materialize-css/dist/js/materialize.min.js'
import 'materialize-css/dist/css/materialize.min.css'
import './index.css'

Answer 1

我必须有趣地导入jquery

来自

import $ from 'jquery'

到

import $ from 'jquery/src/jquery'

来自https://github.com/facebook/create-react-app/issues/679#issuecomment-311887619

Answer 2

从'jquery'导入$

引用：https://www.npmjs.com/package/jquery

并在componentWillMount（）中初始化它

$(document).ready(function(){
  $('.parallax').parallax();
});

尝试在Gatsby.js中使用react-materialize组件，获取ReferenceError：$未定义

2 个答案: