Materializecss 选项卡不适用于 React（npm 导入）

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

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

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

Working Demo - Tabs MaterializeCSS

您可以从此存储库检查 React 中的其他 Materialize 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;

Materializecss 选项卡不适用于 React（npm 导入）

Materializecss tabs are not working with React (npm import)

javascript

materialize

reactjs