Question

大家早上好，

我一直在努力获得物化css来处理我的react-app，特别是Javascript文件。

我尝试了多种方式，但这是我认为我已经走得更远的方式。

在我的＆＃39; landingpage.js＆＃39;文件：

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，这样你就可以使用JS组件而不需要JQuery

Answer 2

根本不建议使用jquery with react 如果您尝试使用材料如何使用像

这样的库

material-ui 使用

安装它

npm i material-ui --save

你可以按照这里的例子进行对话，基本上是一个模态 dialog in material ui

无法导入Materialise CSS JS的反应

2 个答案: