javascript - 无法导入 Materialize CSS JS react

Question

大家早上好

我一直在努力让 materialize css 在我的 react-app 上工作，特别是 Javascript 文件。

我尝试了多种方法，但这是我认为我走得更远的一种。

在我的“landingpage.js”文件中:

import React, { Component } from 'react';
import './styles/css/custom.css';
import $ from 'jquery';
import 'materialize-css'; // It installs the JS asset only
import '../node_modules/materialize-css/js/modal';

目标是打开一个简单的弹出窗口(这样我就可以测试 JS 是否被正确导入)

            <div>
            <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
            <div id="modal1" class="modal">
                <div class="modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
                </div>
                <div class="modal-footer">
                <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
                </div>
            </div>    
        </div>

因此，一旦组件挂载:

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

当我点击按钮时，它应该会打开一个弹出窗口，但是:

ReferenceError: Component is not defined

此错误发生在我尝试导入的 JS 文件上。

我尝试以多种不同的方式导入，但该应用程序甚至无法识别任何内容。这两天我一直在尝试导入它并在网上搜索了很多次，我正在为一个学校期末项目做这个，试图自学 react 。

这是我要导入的框架的链接:

https://materializecss.com/modals.html#!

感谢您的宝贵时间。

Answer 1

您需要将 npm 模块的完整路径添加到您的入口点文件中，以便 webpack 使用您的 css...

这是一个典型的 create-react-app 使用 Index.js 的例子，或者如果你正在做你自己的 react 样板，你怎么调用它。

Index.js

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

import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

完成此操作后，您的组件将能够访问 css 属性。我还建议您安装 npm i -S materialize-css@next 这样您就可以在不需要 JQuery 的情况下使用 JS 组件