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

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组件，但也无法正常工作。

这是我如何使用它：

页/ 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

布局/ 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'导入$

参考：qazxsw poi

并在componentWillMount（）中初始化它

https://www.npmjs.com/package/jquery