开发者社区> 问答> 正文

能否在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方法来控制组件隐藏和显示,但是最终的结果和预期不符。

展开
收起
小旋风柴进 2016-05-27 10:34:13 2971 0
2 条回答
写回答
取消 提交回答
  • 可以的,确保组件 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
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载