Question

我们说我有一个reactJS组件。我想在该组件内的几个元素中添加一个类。

这是我的组件的渲染方法;

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

元素类类似于class1，class2，class3等。现在我想在加载后为<div1>和<div2>添加一个额外的类。

现在我正在做这样的事情：

在我的componentDidMount函数

中

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

我还想在mainClass组件上添加一个foundation accordion事件监听器：这就是我在reactJS中试图实现的目标：

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

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

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

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

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

在reactJS中的componentDidMount之后添加类

1 个答案: