Question

我正在重建一个从JQuery，Bootstrap ...到React的项目，并且有一些概念需要澄清。

使用JQuery的示例：我有一个元素，它有一个名为ShowTarget的click函数，该函数将使用JQuery切换。

SELECT COUNT(*) AS numrows

我知道如何使用React click事件来显示或隐藏#target元素，但现在我需要function ShowTarget() { $('#target').toggle("blind", 500); }事务效果。

在这种情况下，我自己用CSS实现事务效果，或者用JQuery绑定React，哪一个更好？

我在React官方网站上看到了("blind", 500)，也许是这个？

Answer 1

我不是故意粗鲁，但我不建议在反应中使用jQuery。完全没有。

在点击时为您的JSX元素添加className值，并使用CSS过渡或动画为其设置动画。如何添加className取决于您 - 您可以将点击状态存储在flux存储中，然后根据它应用/删除对应的className。

2016年3月16日编辑：

评论中给出了一些好的建议。你可以通过多种方式解决这个问题。概述的方式是标准Web技术方面最简单的方法。当然，有很多抽象可以简化事情。只有在你知道基本原理如何运作之后，我才会推荐这些。

要进行实际动画，您可以自己编写过渡/动画或使用animate.css等库。

基于反应的解决方案（如ReactTransitionGroup or ReactCSSTransitionGroup）或基于弹簧动画的优秀react-motion也是一个不错的选择。我只是认为应该掌握基本概念，并在使用更高级别的抽象之前从它们开始。

Answer 2

您可以使用＆＃39; ref＆＃39;要按照here的说明访问实际的DOM节点，那么只需调用所需的jQuery函数。

let HelloComponent = React.createClass({
    clickHandler(){
    $(this.refs.h1).toggle("blind", 500);
  },
    render(){
    return (
        <div>
        <h1 ref='h1'>Hello, world!</h1>
        <button onClick={this.clickHandler}>Fade</button>
      </div>
    ) 

  }
})


ReactDOM.render(
  <HelloComponent/>,
  document.getElementById('container')
);

https://jsfiddle.net/p757cbxp/

我与Bootstrap的Modal完全相似，但不推荐使用它，因为你在没有React知识的情况下更改DOM，但有时你只需要现有的代码就可以了！ This更多地解释了在没有React知识的情况下，关于DOM maniuplation的内容是什么和不允许的。

与JQuery反应

2 个答案: