能否在React里使用JQuery里的fadeIn,fadeOut等方法控制组件？
var HeaderForm = React.createClass({
componentDidMount : function(){
this.props.flag_form? $(this).slideDown(200):$(this).slideUp(200);
},
render: function(){
var styleObj = {
display: this.props.flag_form? "block":"none"
};
return(
<form style={styleObj}>
<input type="text" placeholder="Search" className="searchInput"/>
<button><i className="icon-search"></i></button>
</form>
)
}
})我想调用Jquery里的slideDown和slideUp方法来控制组件隐藏和显示，但是最终的结果和预期不符。
写回答
-
可以的，确保组件 DidMount 的情况下，是可以获取到真实 dom 并进行操作的。
但是， 非常不建议这么做。
react 是一个数据(状态)驱动的视图层框架， UI = f(state) ， 用 jquery 修改真实的 dom 是很危险的事情，只是控制显示隐藏还好，尤其是对真实dom 的增删改，会破坏原有的结构。
完全可以换一个思路来解决这个问题。 可以用 css3 定义 fadeIn,fadeOut 等动画。通过 添加和移除 className 来实现动画效果， 而 className 本身可以作为组件的状态。 通过修改状态来驱动视图变化
2019-07-17 19:17:15赞同 展开评论 打赏 -
显然你这里写的是错误的：
componentDidMount : function(){ this.props.flag_form? $(this).slideDown(200):$(this).slideUp(200); },这里的 this 是什么？ 这里的 this 指的是你 HeaderForm 这个组件对象，组件对象是 React 生成的，并不是真实的一个 Dom 节点，你不能用 jQuery 来操作他，没有用的。
想要直接操作 Dom 的话，在 React 0.14 中你可以给 render 的 form 设置一个 ref ， 然后再通过 this.refs.formNode (formNode 是你给 form 设置的 ref)，这个对象才是那个 form 的真实 dom 节点，你可以用 jQuery 给他封装一下然后就可以调用 jQuery 的方法了 。
如果你用的是 0.13 的话，还要加个 getdDOMNode() 这个函数才能拿到真实的 Dom 节点。2019-07-17 19:17:15赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
