Question

我在使用带有React的materialize-css时遇到问题。我用Webpack和Babel构建了它。问题是：

TypeError：$（...）。parallax不是函数
  TypeError：$（...）。material_chip不是函数
  TypeError：$（...）。modal不是函数
  等

这是我的React课程：

import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';

class AwesomeComponent extends React.Component {

    constructor(props) {
        super(props);
    }

    onLike () {
        $('.modal').modal();
    }

    render() {
        return (
            <div>
                <div id="modal1" className="modal">
                    <div className="modal-content">
                        <h4>Modal Header</h4>
                        <p>A bunch of text</p>
                    </div>
                    <div className="modal-footer">
                        <a href="#!" className=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
                    </div>
                </div>
                <a className="waves-effect waves-light btn" onClick={this.onLike}>
                    <i className="material-icons left">
                        cloud
                    </i>
                    Like cloud
                </a>
            </div>
        );
    }

}

export default AwesomeComponent;

这是我导入jQuery的webpack.config.js的一部分：

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })

这是我的package.json：

的一部分

"dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "materialize-css": "^0.98.0",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "webpack": "^1.13.3",
    "jquery": "^2.1.4"
  },

请帮助我，我已经尝试了一切。

我已经调试过了。它将插件（例如.modal）添加到$ prototype中，但是当我想在类中使用它时，函数会以某种方式消失。

最后这是一个堆栈跟踪：

TypeError：$（...）。modal不是函数[了解更多] bundle.js：44497：14
    onLike
    与...相似     ReactErrorUtils.invokeGuardedCallback
    executeDispatch
    executeDispatchesInOrder     executeDispatchesAndRelease
    executeDispatchesAndReleaseTopLevel
    的forEach     forEachAccumulated
    EventPluginHub.processEventQueue
    runEventQueueInBatch
    ReactEventEmitterMixin.handleTopLevel
    handleTopLevelImpl
    TransactionImpl.perform
    ReactDefaultBatchingStrategy.batchedUpdates
    batchedUpdates
    ReactEventListener.dispatchEvent

Answer 1

对于有同样问题的其他人。

不要在webpack.config.js webpack.ProvidePlugin中使用，也不要导入$或jQuery。 Materialise将为您提供。

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })

要使用以下代码，请使用jsx文件：

import 'materialize-css';

并且不要忘记正确的装载程序，这对Materialise来说很重要：

loaders : [
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'],
                exclude: ['node_modules']
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader?importLoaders=1'],
                exclude: ['node_modules']
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['babel-loader', 'babel-loader?presets[]=react,presets[]=es2015'],
            }
        ]

Materialise不适用于React，Webpacka。 jQuery没有扩展

1 个答案: