は、動的機能を持つ要素を初期化 - jQueryの

Question

は、私が現在使用している、私のサイトを構築するためのルータを反応させるのが、私は、私は、私はすべての上で私のドロップダウンを初期化保つことができますどのように$('.dropdown').dropdown();

を使用して初期化し、いくつかのページに.dropdown秒を持っています私は反応ルータを使用して訪問するページ？ onhashchangeは、変更されたURLを登録していないようです。

これは私のドロップダウンの機能のようです。

はjQueryのは

$(function() { 
     $('.dropdown').dropdown(); 
     $(window).on('hashchange', function(e){ 
      $('.dropdown').dropdown(); 
     }); 
    }); 

    $.fn.extend({ 
     dropdown: function(o){ 
      var o = $.extend({ maxHeight: 600, buffer: 100, delay: 500 }, o); 

      return this.each(function(){ 
       var dropdown = $(this), 
        toggle = dropdown.find('.toggle'), 
        menu = dropdown.find('.menu'), 
        a = dropdown.find('a'), 
        liheight = dropdown.height(); 
       if(!dropdown.length){ return; } 


       toggle.click(function(e){ 
        if(!menu.is(':visible')) { 
         $('.menu').parent().removeClass('open'); 
        } 
        menu.parent().addClass('open'); 
       }); 

       $(document).bind('click', function(e){ 
        if (! $(e.target).parents().hasClass('dropdown')) 
         menu.parent().removeClass('open'); 
       }); 
      }); 
     } 
    }); 

また、私はこれを試していないが、それでも運いる：

$('body').on('focus', '.dropdown' function(e){ 
    $('.dropdown').dropdown(); 
}); 

を編集：でcomponentDidMount()機能を使用した溶液

にルータを反応させますドロップダウンがレンダリングされるたびにドロップダウンを初期化します。これは私が追加するものである：

export const elDropdown = React.createClass({ 
    componentDidMount: function() { 
     $(document).ready(function() { 
      $('.dropdown').dropdown(); 
     }) 
    }, 
    render() { 
     return(
      <div>... 

Answer 1

彼らはページ上で利用可能になった後、あなたがドロップダウンを初期化する必要があります。それを行う正しい場所は、Reactのライフサイクルの方法です。その場合、componentDidMount - https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

ドロップダウンをラップして初期化するコンポーネントを作成できます。

class DropdownWrapper extends React.Component { 
    constructor(){ 
    super() 
    this.id = 'someUniqueID' 
    } 
    componentDidMount(){ 
    $('#' + this.id).dropdown(); 
    } 
    render(){ 
    return <select id={this.id} otherProps={this.otherProps} ></select> 
    } 
} 

一意の識別子を使用する必要があることに注意してください。手動でコンポーネントに渡すことも、ランダムに作成することもできます。