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

react代码的相关部分是这样的：

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

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

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

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

绑定“这个 [元素]”的正确方法是什么，这样 jQuery 就可以对其进行 slideToggling？

我目前正在使用这个小提琴，那里有一些其他的东西你可以忽略。相关代码在javascript部分的底部

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

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