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中实现。为此，您需要执行<mat-toolbar> <span> <mat-form-field> <input matInput [matDatepicker]="matDatepicker" [formControl]="dateFormControl" (dateChange)="onDateChanged('change', $event)" > <mat-datepicker-toggle matSuffix [for]="matDatepicker"></mat-datepicker-toggle> <mat-datepicker #matDatepicker></mat-datepicker> </mat-form-field> </span> <span class="fill-remaining-space"> <button mat-raised-button (click)="onPreviousClicked($event)" color="accent"><</button> <button mat-raised-button (click)="onNextClicked($event)" color="accent">></button> <button matTooltip="Refresh" mat-icon-button (click)="onRefreshClicked($event)" [disabled]="refreshButtonDisabled"> <mat-icon svgIcon="refresh" class="mat-icon-">Refresh</mat-icon> </button> </span> <span><p>Status:{{statusMessage}}</p></span> <script src="node_modules/chart.js/src/chart.js"></script> </mat-toolbar> <div class="canvasContainer" style="display: block; "> <canvas id="canvasDaily">{{mainChart}}</canvas> </div>。之后，您需要在您的组件JS文件中导入materialize-css。

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

Working Demo - Tabs MaterializeCSS

您可以从此存储库-GermaVinsmoke - Reactize

中查看React中的其他Materialise CSS组件

ref

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

1 个答案: