javascript - 无法在 React 项目中导入 materialize-css 以使用 Chips

Question

我已经通过命令创建了项目:

create-react-app app

我正在使用 materialize-css http://materializecss.com/并想使用芯片 http://materializecss.com/chips.html .

import React, { Component } from 'react';
import $ from 'jquery';
import 'materialize-css';

class Form extends Component {
    constructor(props) {
        super(props);
        $(document).ready(function() {
            $('.chips').material_chip({
                data: [{
                   tag: 'Apple',
                }, {
                   tag: 'Microsoft',
                }, {
                   tag: 'Google',
                }],
            });
        });
    }
    render() {
        return (
            <div>
                <div className="chips"></div>
                <button>Add</button>
            </div>
        )
    }
}

我尝试导入:

import 'materialize-css/bin/materialize.css'
import 'materialize-css/bin/materialize.js'

但它不起作用。浏览器抛出错误:

Uncaught TypeError: $(...).material_chip is not a function

Answer 1

在你的入口 JS 文件中试试这个

import 'materialize-css'; // It installs the JS asset only
import 'materialize-css/dist/css/materialize.min.css';

大功告成!

---

更新:我已经提供了所有必要的细节以使您的代码正常工作。试试这个

index.jsx 文件在这里

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';

class Form extends Component {
  constructor(props) {
    super(props);
    $(document).ready(function() {
      $('.chips').material_chip({
        data: [{
          tag: 'Apple',
        }, {
          tag: 'Microsoft',
        }, {
          tag: 'Google',
        }],
      });
    });
  }
  render() {
    return (
        <div>
          <div className="chips"></div>
          <button>Add</button>
        </div>
    )
  }
}
ReactDOM.render(<Form />, document.getElementById('app'));

和package.json就像

"dependencies": {
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "font-loader": "^0.1.2",
    "jquery": "^3.1.1",
    "materialize-css": "^0.97.8",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "redux": "3.6.0",
    "style-loader": "^0.13.1"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "^2.15.0"
  }

和webpack.config.js是

const webpack = require('webpack');

module.exports = {

  entry: [Screenshot from 2017-01-15 18-11-16
    "./src/index.jsx",
    "webpack-dev-server/client?http://localhost:3000/",
    "webpack/hot/only-dev-server"
  ],

  output: {
    filename: "bundle.js",
    path: __dirname + '/public'
  },
  devServer: {
    contentBase: './public',
    port: 3000
  },

  // Bundle lookup dir for included/imported modules
  // By default, bundler/webpack with search here for the scripts
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js', '.jsx']
  },


  // make sure you added babel-loader to the package
  // npm i babel-loader babel-core babel-preset-es2015 -D
  module: {
    loaders: [
      {
        test: /\.js[x]?$/, // Allowing .jsx file to be transpiled by babel
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
      { test: /\.css$/, loaders: [
        'style',
        'css?importLoaders=1',
        'font?format[]=truetype&format[]=woff&format[]=embedded-opentype'
      ] },
      { test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file-loader?name=fonts/[name].[ext]' }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

没有任何错误。