React和设计良好的jQuery插件并没有什么不兼容的问题。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:fluxxu
链接:http://www.zhihu.com/question/36045843/answer/67064767
来源:知乎
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:fluxxu
链接:http://www.zhihu.com/question/36045843/answer/67064767
来源:知乎
React和设计良好的jQuery插件并没有什么不兼容的问题。
我所说的设计良好的插件,就是你给他一个Element,他只在这个Element里面操作,不到处瞎搞。还有就是它提供了安全destroy的方法可以调用。
一般是这样,比如你想用某个jQuery的autocomplete插件,在jQuery里面你这样初始化:
在React里面,你给包装一下变成这样:
偶尔有脑残插件,非要拿一个selector字符串初始化的,你可以这样对付:
我所说的设计良好的插件,就是你给他一个Element,他只在这个Element里面操作,不到处瞎搞。还有就是它提供了安全destroy的方法可以调用。
一般是这样,比如你想用某个jQuery的autocomplete插件,在jQuery里面你这样初始化:
$('#input').autocomplete();
React.createClass({
shouldComponentUpdate() {
return false; //告诉react这个component我们打算自己瞎搞,叫它别碰
},
componentDidMount() {
$(this.getDOMNode()).autocomplete();
},
componentWillUnmount() {
$(this.getDOMNode()).autocomplete('destroy'); //调用插件的清理函数
},
render() {
return <input type="text" />;
}
});
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" />;
}
});