能否在React里使用JQuery里的fadeIn,fadeOut等方法控制组件？

Question

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

Answer 1

显然你这里写的是错误的：

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 节点。