使用jquery进行反应以滑动切换

我正在尝试通过制作带有可折叠项目的菜单来学习一些 React。我使用 jQuery 来实现它的 SlideToggle 功能，但我无法让它正常工作。

反应代码的相关部分是这样的：

var CollapsableMenuItem = React.createClass({
    toggleDescription: function(el) {
        $(el).slideToggle();
    },
    render: function() {
        return (
            <li>
                <label className='title' 
                       onClick={this.toggleDescription.bind(this)}>
                    {this.props.item.title}
                </label>
                <div className='description'>
                    <label>
                        {this.props.item.body}
                    </label>
                </div>
            </li>
        );
    }
});

虽然我目前正在尝试滑动切换“this”，但将来需要更改为

$(el).parent().find('.description').slideToggle();

因为那是需要滑动切换的实际元素

绑定“this [element]”以便 jQuery 可以对其进行幻灯片切换的正确方法是什么？

我目前正在工作这把小提琴 http://jsfiddle.net/kb3gN/13028/，里面还有一些其他的东西你可以忽略。相关代码位于javascript部分的底部

我想到的第二个问题：使用 jQuery.ready 函数通过 React 绑定点击事件等是不是不好的做法？

理论上，我可以将 jquery 文件与每个组件文件及其事件处理程序捆绑在一起。

的背景this在 React 中不是元素，而是 React 组件。 jQuery 不明白如何将它用作选择器。

您需要获取对要使用 jQuery 控制的元素的引用。

makeTogglable: function(element) {
  $element = $(element);

  this.toggle = function() {
    $element.slideToggle();
  };
},
render: function() {
  return (
    <li>
      <label onClick={this.toggle}></label>
      <div ref={this.makeTogglable}></div>
    </li>
  );
}

The ref prop https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute接受一个回调，该回调将在安装组件时运行。 DOM 元素将被传递给回调，以便您可以直接使用它。

在本例中，我们使用它来创建并公开一个新的this.toggle方法，该方法调用.slideToggle在元素上。

最后，我们通过了新的this.toggle方法到onClick我们想要触发切换的元素的处理程序。在这种情况下，它是<div>.