reactJS에서 componentDidMount 뒤에 클래스 추가

Question

내가 reactJS 구성 요소를 가지고 있다고 가정 해 보겠습니다. 해당 구성 요소 안의 몇 가지 요소에 클래스를 추가하고 싶습니다.

이것은 내 구성 요소의 렌더링 방법입니다.

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

요소 클래스 등이 클래스 1, 강좌 2 강좌 3, 같은 있습니다 .. 지금 나는 그들이로드있어 후 <div1> 및 <div2>에 추가 클래스를 추가하고 싶습니다. 나는 또한 내 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'); 
}); 

같은 일을하고 있지만, 클래스는 추가되지 않아요. 당신이 당신의 ReactJS 구성 요소에서 jQuery를 사용하려면

Answer 1

해당 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') 
); 

과 같은 작업을 수행 할 수 있습니다