码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-10-30 14:13:00      阅读:482      评论:0      收藏:0      [点我收藏+]

标签:

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者: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" />;
    }
});

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

标签:

原文地址:http://www.cnblogs.com/HuiLove/p/4923059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!