Не могу импортировать Materialise CSS JS реагировать - PullRequest
Новая
       6

Не могу импортировать Materialise CSS JS реагировать

0 голосов
/ 17 мая 2018

Доброе утро всем,

Я изо всех сил пытался заставить css материализоваться для работы над моим реактивным приложением, в частности, файлами 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, который я пытаюсь импортировать.

Я пытался импортировать различными способами, и приложение даже не распознало ничего.Я пытался импортировать это в течение двух дней и много искал в Интернете, я делаю это для проекта School Final, пытаясь самостоятельно научиться реагировать.

Вот ссылка на фреймворк, япытается импортировать: 

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

Спасибо за ваше время.

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Вам нужно добавить полный путь от модуля npm в файл точки входа для веб-пакета, чтобы использовать ваш css ...

вот пример в типичном приложении create-реагировать с использованием Index.js иличто бы вы ни называли, если вы делаете свой собственный шаблон реакции.

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

0 голосов
/ 17 мая 2018

использование jquery с реагировать вообще не рекомендуется, если вы пытаетесь использовать материал, как насчет использования библиотеки, такой как

material-ui , установите ее, используя 

npm i material-ui --save

и вы можете следовать примеру здесь для диалога, который в основном является модальным диалогом в материале ui

...