react-materialize $(...).tabs 不是函数答案

【问题标题】：react-materialize $(...).tabs is not a functionreact-materialize $(...).tabs 不是函数
【发布时间】：2018-02-21 05:02:00
【问题描述】：

无法从 materialize 调用 .tabs() 函数，所有内容看起来都是导入的，并且顺序正确，materializecss 然后是 jQuery，然后是 materialize.js。 jQuery 函数工作正常，实现 - 不要

$(...).tabs 不是函数

问题应该出在导入的某个地方，但我不知道出了什么问题。

index.html

 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Import materialize.css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" >
    <title>Title</title>
  </head>
  <body>  

    <div id="root"></div>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

  </body>

我从中调用的组件

import React,{Component} from 'react';
import {Tab,Tabs} from 'react-materialize'
export default class Tab1 extends Component{

  next(){
    let $ = require('jquery');

    $('ul.tabs').tabs('select_tab','tab_01');
    // alert();
  }

  render(){
    return(
      <div className="swipeTab" >
        <a onClick={()=> this.next()} className="waves-effect btn onasTabTrigger hoverable">Button</a>
      </div>

    );
  }
}

这个 Tab1 组件只是简单地作为选项卡的内容放置在父级中

<Tabs className='tabs z-depth-1' tabOptions={{swipeable: true }} onChange={() => console.log(this)}>
  <Tab title="tab1" active >
    <Tab1 />
  </Tab>
  <Tab title="tab2" >
    <Tab2/>
  </Tab>
</Tabs>

【问题讨论】：

标签： javascript reactjs materialize

【解决方案1】：

将标签初始化放入componentDidMount。

从 next 调用上的 click 事件中删除初始化。

//onClick={()=> this.next()} remove it

组件：

let $ = require('jquery');

export default class Tab1 extends Component{


        componentDidMount(){            
            //initialisation goes here.
          $('ul.tabs').tabs('select_tab','tab_01');
        }

        render(){  
            return(
              <div className="swipeTab" >                   
                     <a className="waves-effect btn onasTabTrigger hoverable">Button</a>  
                </div>
            );
        }
    }

【讨论】：

那不是为了初始化，这个函数应该在'a'点击时将活动幻灯片更改为第二个，这是一个材质样式的按钮。无论如何，在 Componentdidmount 中运行函数仍然给出同样的错误