Question

无法从物化中调用.tabs()函数，所有内容都按照正确的顺序进行导入，materializecss然后是jQuery然后是materialize.js。 jQuery函数工作正常，具体化 - 不要

$（...）。制表符不是函数

问题应该在某个地方进行，但我不能解决问题。

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。

从click来电中next事件中删除初始化。

//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 个答案: