Klasse nach componentDidMount in reactJS hinzufügen

Question

Nehmen wir an, ich habe eine reacJS-Komponente. Ich möchte eine Klasse zu ein paar Elementen innerhalb dieser Komponente hinzufügen.

Dies ist die Rendermethode meiner Komponente.

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

Die Elemente Klassen sind so etwas wie dieses class1, class2, class3, etc .. Jetzt möchte ich eine zusätzliche Klasse <div1> und <div2>, nachdem sie geladen wurde hinzuzufügen.

Im Moment mache ich so etwas wie diese:

Inside my componentDidMount Funktion

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

Ich mag auch einen foundation accordion Ereignis-Listener auf meiner Mainclass Komponente hinzuzufügen: Dies ist, was ich bin versuchen, in reactJS zu erreichen:

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

hinzufügen das Fundament Akkordeon Ereignis-Listener, ich so etwas wie dies

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

tue ich dies in meinem componeneDidMound hinzugefügt, aber die Klassen sind nicht hinzugefügt zu werden.

Answer 1

Wenn Sie jQuery in Ihrem ReactJS Komponente verwenden möchten, können Sie so etwas wie dieses 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') 
); 

tun