Reactでメソッドを実行するには2回クリックする必要があります

Question

ちょっと現在Meteor and Reactでプロジェクトを進めていますが、現在はMaterializeでフロントエンドをスタイリングしています。ドロップダウンとサイドナビゲーターを動作させるには、いくつかのメソッドでいくつかのjquery行を追加する必要があります。 ここでの問題は、ボタンを2回クリックしてドロップダウンとサイドバーをアクティブにしたり表示したりする必要があることですが、最初に2回クリックすると1回のクリックで動作します。 これらのメソッドです：

showDropdown(){ 
    $(".dropdown-button").dropdown(); 
} 

collapse(){ 
    $('.button-collapse').sideNav({ menuWidth: 300, closeOnClick: true }); 
} 

コンストラクタ：

export default class Navigation extends TrackerReact(React.Component) { 
constructor() { 
    super(); 
    this.showDropdown= this.showDropdown.bind(this); 
    this.collapse = this.collapse.bind(this); 
} 

そして、私は、レンダリングにこれらのメソッドを使用していますこれはどこです：

render(){ 
    var navOptions; 
    if (Roles.userIsInRole(Meteor.user(), 'user')){ 
     navOptions = (
      <div> 
     <nav> 
      <div className="nav-wrapper"> 
       <a href="/" className="brand-logo">SeniorSmart</a> 
       <a href="" onClick={this.collapse} data-activates="mobile-demo" className="button-collapse"><i className="material-icons">menu</i></a> 
       <ul id="nav-mobile" className="right hide-on-med-and-down"> 
        <li><a href="/">Hjem</a></li> 
        <li><a className='dropdown-button' href='' onClick={this.showDropdown} data-activates='dropdown1'>Drop Me!</a></li> 
        <li><a href="collapsible.html">JavaScript</a></li> 
       </ul> 
      </div> 
     </nav> 
       <ul id="dropdown1" className="dropdown-content"> 
        <li><a href="/finn_aktiviteter">Finn aktiviteter</a></li> 
        <li><a href="#">Mine venners aktiviteter</a></li> 
        <li><a href="#">Mine påmeldinger</a></li> 
        <li><a href="/opprett_aktivitet">Opprett aktivitet</a></li> 
       </ul> 
       <ul className="side-nav" id="mobile-demo"> 
        <li><a href="sass.html">Sass</a></li> 
        <li><a href="badges.html">Components</a></li> 
        <li><a href="collapsible.html">Javascript</a></li> 
        <li><a href="mobile.html">Mobile</a></li> 
       </ul> 
      </div> 
    ) 

Answer 1

あなたはそれらのjQueryので二回クリックする必要がありますプラグインを初期化する必要があります。あなたの最初のクリックはそれらを初期化します、そして、彼らはちょうど他のすべてのクリックと一緒に正常に動作します。

これを避けるには、componentDidMountの内部でこれらのプラグインを初期化する必要がありますが、使用するDOM要素が画面に表示されていることを確認する必要があります。

ログインしたユーザーにユーザーロールがある場合にのみ、ナビゲーションが表示されます。したがって、ユーザーがその役割を持たない場合、nav要素はレンダリングされず、プラグインは初期化できません。