Javascript 在reactJS中的componentDidMount之后添加类

假设我有一个reactJS组件。 我想向该组件中的几个元素添加一个类

这是我的组件的渲染方法

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

我还想在我的mainClass组件上添加一个

foundation accordion

事件侦听器： 这就是我试图在reactJS中实现的目标：

添加基础手风琴事件监听器， 我正在做这样的事情

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

---

我在componeneDidMound中添加了这个，但是没有添加类。

如果您想在ReactJS组件中使用jQuery，您可以这样做

var Hello=React.createClass({
componentDidMount:function（）{
$（文件）。基础（“手风琴”）；
$（'body'）。在（'click'，'#disable steps'，function（）上{
console.log（'ee'）；
$（'.step-1、.step-2'）.addClass（'disabled'）；
})
$（'.accordion'）.on（'toggled'，函数（事件，accordion）{
if（accordion.parents（'li'）.hasClass（'disabled'））
手风琴。removeClass（“主动”）；
});
},
render:function（）{
返回(


小组1.Lorem ipsum dolor


小组2.Lorem ipsum dolor


小组3。


禁用步骤1和2


);
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);

将Jquery与React框架结合使用是个坏主意。1.因为您可以使用纯JS/ES6做任何您想做的事情，并且不必加载两个LIB

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

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