使用jquery对slideToggle做出反应

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

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

var CollapsableMenuItem = React.createClass({ toggleDescription: function(el) { $(el).slideToggle(); }, render: function() { return ( 
  {this.props.item.title}  
  {this.props.item.body}  
 
 ); } }); 

虽然我目前正试图滑动切换“这个”，这将需要在未来改变

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

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

什么是正确的绑定“this [element]”的方式，所以jQuery可以对它进行slideToggling吗？

我正在努力摆脱这个小提琴 ，你可以忽略其他一些东西。 相关代码位于javascript部分的底部

第二个问题浮现在脑海中：使用jQuery.ready函数来绑定点击事件等是不是很糟糕？

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

Answer 1

React中的this上下文不是元素，它是React组件。 jQuery不了解如何将它用作选择器。

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

 makeTogglable: function(element) { $element = $(element); this.toggle = function() { $element.slideToggle(); }; }, render: function() { return ( 
  
 
 ); } 

ref prop进行回调，该回调将在安装组件时运行。 DOM元素将被传递给回调，以便您可以直接使用它。

在这种情况下，我们使用它来创建和公开一个新的this.toggle方法，该方法在元素上调用.slideToggle 。

最后，我们将新的this.toggle方法传递给我们想要触发切换的元素的onClick处理程序。 在这种情况下，它是

。