Вкладки Materializecss не работают с React (импорт npm) - PullRequest
Новая
       11

Вкладки Materializecss не работают с React (импорт npm)

0 голосов
/ 08 марта 2019

Я просматривал решения моей проблемы от других людей и документацию Materializecss, но не могу заставить работать вкладки MaterializeCss и другие компоненты в разделе javascript для моего проекта React. 

import M from 'materialize-css';

componentDidMount() {
  let el = document.querySelector('.tabs');
  let instance = M.Tabs.init(el, {});
}

render() {
  return (
    <div className="App">
      <div className="row">
        <div className="col s12">
          <ul className="tabs">
            <li className="tab col s3">
              <a href="#test1">Test 1</a>
            </li>
            <li className="tab col s3">
              <a className="active" href="#test2">
                Test 2
              </a>
            </li>
            <li className="tab col s3 disabled">
              <a href="#test3">Disabled Tab</a>
            </li>
            <li className="tab col s3">
              <a href="#test4">Test 4</a>
            </li>
          </ul>
        </div>
        <div id="test1" className="col s12">
          Test 1
        </div>
        <div id="test2" className="col s12">
          Test 2
        </div>
        <div id="test3" className="col s12">
          Test 3
        </div>
        <div id="test4" className="col s12">
          Test 4
        </div>
      </div>
    </div>
  );
}

Я также попробовал реализацию Jquery, но это тоже не работает. Простое размещение тегов сценария и кода вкладок в теле моего файла index.html работает, но очень ограничивает. Я должен использовать MaterializeCss, так что реакция-материализация не вариант.

Хотел бы получить совет по этому вопросу.

1 Ответ

2 голосов
/ 09 марта 2019

Может быть также реализовано в materializeCSS. Для этого вам нужно сделать npm install materialize-css@next. После этого вам нужно импортировать materialize-css в ваш файл JS компонента.

Для использования компонентов Javascript materialize-css ссылка на эти компоненты должна быть сделана в componentDidMount(), а затем она может быть использована в ref.

Рабочая демонстрация - вкладки MaterializeCSS

Вы можете проверить другие CSS-компоненты Materialise в React из этого репозитория - GermaVinsmoke - Reactize 

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";

class Tabs extends Component {
  componentDidMount() {
    M.Tabs.init(this.Tabs);
  }
  render() {
    return (
      <>
        <ul
          ref={Tabs => {
            this.Tabs = Tabs;
          }}
          id="tabs-swipe-demo"
          class="tabs"
        >
          <li class="tab col s3">
            <a href="#test-swipe-1">Test 1</a>
          </li>
          <li class="tab col s3">
            <a href="#test-swipe-2">Test 2</a>
          </li>
          <li class="tab col s3">
            <a href="#test-swipe-3">Test 3</a>
          </li>
        </ul>

        <div id="test-swipe-1" class="col s12 blue">
          Test 1
        </div>
        <div id="test-swipe-2" class="col s12 red">
          Test 2
        </div>
        <div id="test-swipe-3" class="col s12 green">
          Test 3
        </div>
      </>
    );
  }
}

export default Tabs;
...