react-materialize $（…）.tabs不是函数

Question

Can't call .tabs() function from materialize, everything looks imported and in the right order, materializecss then jQuery then materialize.js. 无法从物化调用.tabs()函数，所有内容看起来.tabs()导入，并且以正确的顺序导入了物化.tabs() ，然后是jQuery，然后是物化.tabs() 。 jQuery functions work fine, materialize - don't jQuery函数工作正常，实现-不要

$(...).tabs is not a function $（...）。tabs不是函数

The problem should be somewhere in import but I can't get what's wrong. 问题应该在导入中的某个地方，但我无法理解是什么问题。

index.html 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>

Component where I'm calling from 我从那里打电话的组件

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>

    );
  }
}

This Tab1 component is simply placed as a content of the tab in the parent 此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>

Answer 1

Put tab initialisation in componentDidMount . 将选项卡初始化放在componentDidMount 。

Remove initialisation from click event on next call. 从next通话的click事件中删除初始化。

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

component : 零件：

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>
            );
        }
    }

react-materialize $（…）.tabs不是函数

问题描述

1 个解决方案

解决方案1
0 2018-02-21 05:05:22

react-materialize $（…）.tabs不是函数

问题描述

1 个解决方案

解决方案1 0 2018-02-21 05:05:22

解决方案1
0 2018-02-21 05:05:22