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

我一直在寻找其他人对我的问题的解决方案和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。

希望就此获得一些建议。

最佳答案

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

要使用Javascript materialize-css组件，必须在componentDidMount()中对这些组件进行引用，然后才能在ref中使用它。

Working Demo - Tabs MaterializeCSS

您可以从此存储库-GermaVinsmoke - Reactize中检查React中的其他Materialise CSS组件

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;

关于javascript - Materializecss选项卡不适用于React(npm import)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55069297/