reactJSのcomponentDidMountの後にクラスを追加

Question

私はreactJSコンポーネントを持っているとします。 そのコンポーネントの中のいくつかの要素にクラスを追加したいと思います。

これはコンポーネントのレンダリング方法です。

render() { 
    var self = this; 
     return (
     <div className='mainClass'> 
      <div className='class1'> 
      <div className='class2'> 
      <div className='class3'> 
     </div> 
     ) 
    } 

要素のクラスは今、私は彼らがロードされました後<div1>と<div2>に余分なクラスを追加したいこのClass1のような何か、クラス2、Class3に、など。 です。私はまた私のmainClassコンポーネントにfoundation accordionイベントリスナーを追加したい私のcomponentDidMount機能

$('.class1,.class2').addClass('extraClass'); 

内部

：

右は今、私はこのような何かをやっている これは、私は何でありますreactJSで達成しよう：

http://jsfiddle.net/z_acharki/vb5rchxn/13/

を追加するには基礎アコーディオンイベントリスナー、 は、私は私のcomponeneDidMoundでこれを追加この

$('.mainClass').on('toggled', function (event, accordion) { 
    console.log('hi'); 
    if(accordion.parents('li').hasClass('disabled')) 
    accordion.removeClass('active'); 
}); 

ような何かをしていますが、クラスが追加取得されていません。

Answer 1

あなたReactJSコンポーネントでのjQueryを使用したい場合は、そのhttps://jsfiddle.net/sumbad/p0kyjnyk/

var Hello = React.createClass({ 

    componentDidMount: function() { 
    $(document).foundation('accordion'); 

    $('body').on('click', '#disable-steps', function(){ 
    console.log('ee'); 
     $('.step-1,.step-2').addClass('disabled'); 
    }) 

    $('.accordion').on('toggled', function (event, accordion) { 
     if(accordion.parents('li').hasClass('disabled')) 
     accordion.removeClass('active'); 
    }); 
    }, 

    render: function() { 
    return (
    <ul className="accordion" data-accordion="myAccordionGroup"> 
     <li className="accordion-navigation step-1"> 
     <a href="#panel1c">Step 1</a> 
     <div id="panel1c" className="content"> 
      Panel 1. Lorem ipsum dolor 
     </div> 
     </li> 
     <li className="accordion-navigation step-2"> 
     <a href="#panel2c">Step 2</a> 
     <div id="panel2c" className="content"> 
      Panel 2. Lorem ipsum dolor 
     </div> 
     </li> 
     <li className="accordion-navigation step-3"> 
     <a href="#panel3c">Step 3</a> 
     <div id="panel3c" className="content"> 
      Panel 3. 
      <br/> 
      <button type='button' id='disable-steps'>Disable steps 1 & 2</button> 
     </div> 
     </li> 
    </ul> 
    ); 
    } 
}); 

ReactDOM.render(
    <Hello/>, 
    document.getElementById('container') 
); 

ような何かを行うことができます