无法导入 Materialize CSS JS 反应

Question

大家早上好，

我一直在努力让物化 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 文件上。

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

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

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

感谢您的宝贵时间。

Answer 1

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

这里是一个典型的使用 Index.js 的 create-react-app 示例，或者如果你正在做自己的反应样板，你会怎么称呼它。

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 组件

Answer 2

完全不推荐使用 jquery 和 react 如果您尝试使用材料，如何使用像

这样的库

material-ui 使用

安装它

npm i material-ui --save 

您可以按照此处的示例进行对话框，该对话框基本上是一种模式 dialog in material ui