React和设计良好的jQuery插件并没有什么不兼容的问题。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:fluxxu
链接:http://www.zhihu.com/question/36045843/answer/67064767
来源:知乎

React和设计良好的jQuery插件并没有什么不兼容的问题。
我所说的设计良好的插件,就是你给他一个Element,他只在这个Element里面操作,不到处瞎搞。还有就是它提供了安全destroy的方法可以调用。
一般是这样,比如你想用某个jQuery的autocomplete插件,在jQuery里面你这样初始化:
$('#input').autocomplete();
在React里面,你给包装一下变成这样:
React.createClass({
    shouldComponentUpdate() {
        return false; //告诉react这个component我们打算自己瞎搞,叫它别碰
    },
    componentDidMount() {
        $(this.getDOMNode()).autocomplete();
    },
    componentWillUnmount() {
        $(this.getDOMNode()).autocomplete('destroy'); //调用插件的清理函数
    },
    render() {
        return <input type="text" />;
    }
});
偶尔有脑残插件,非要拿一个selector字符串初始化的,你可以这样对付:
var counter = 0;

React.createClass({
    shouldComponentUpdate() {
        return false;
    },
    componentWillMount() {
        this.__elementID = 'naocan_' + (++counter); //强制给他分配一个唯一的id
    },
    componentDidMount() {
        this.__instance = naocan.init({
            selector: '#'+this.__elementID
        });
    },
    componentWillUnmount() {
        this.__instance.destroy();
    },
    render() {
        return <input id={this.__elementID} type="text" />;
    }
});
posted @ 2015-10-30 13:43  LAOS  阅读(314)  评论(0编辑  收藏  举报