javascript - Materializecss 选项卡不适用于 React(npm import)

Question

我一直在查看其他人对我的问题的解决方案和 Materializecss 文档，但我无法在 javascript 部分下获取 MaterializeCss 选项卡和其他组件以在我的 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，因此 React-materialize 不是一个选项。

很想就此获得一些建议。

Answer 1

它也可以在materializeCSS中实现。 为此，您需要执行npm install Materialize-css@next。之后，您需要在组件 JS 文件中导入 Materialize-css。

要使用 Javascript Materialize-CSS 组件，必须在 componentDidMount() 中创建这些组件的引用，然后才能在 ref 中使用它>.

Working Demo - Tabs MaterializeCSS

您可以从此存储库中检查 React 中的其他 Materialise CSS 组件 - 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"
          className="tabs"
        >
          <li className="tab col s3">
            <a href="#test-swipe-1">Test 1</a>
          </li>
          <li className="tab col s3">
            <a href="#test-swipe-2">Test 2</a>
          </li>
          <li className="tab col s3">
            <a href="#test-swipe-3">Test 3</a>
          </li>
        </ul>

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

export default Tabs;