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

Question

無法從物化調用.tabs()函數，所有內容看起來.tabs()導入，並且以正確的順序導入了物化.tabs() ，然后是jQuery，然后是物化.tabs() 。 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>

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

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