Jquery我都用了5到6年了,多少还是有感情了,虽然react不提倡直接操作dom,自然不提倡结合jquery来进行开发。
但作为jquery的忠实粉丝,怎么也得集成进来看看,前面一节我们说到了react的生命周期,render之后会触发componentDidMount,所以jquery的调用自然就需要放到该方法里面咯
第一步:采用dva创建项目,并用webstore来打开项目
第二步:安装jquery插件
cnpm i --save-dev jquery
第二步:配置webpack.config.dev.js
因为我们是采用dva创建的项目,该文件是放在
/node_modules/roadhog/lib/config/webpack.config.dev.js
找到插件定义的地方:
plugins: [new _webpack2.default.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
.....
修改成:
plugins: [
new _webpack2.default.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
}),
new _webpack2.default.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
...
第三步 :写个测试用例
import React,{Component} from 'react';
class ClickCounter extends Component{
constructor(prop){
super(prop);
this._handleClick=this._handleClick.bind(this);
this.state={count:0};
}
_handleClick(){
console.log(this);
console.log(this.state)
this.setState({count:this.state.count+1});
}
componentWillMount(){
}
componentDidMount(){
console.log($("#buttonC").get(0));
$("#buttonC").click(function(){
$(this).after("<div>我是jquery创建的元素</div>")
})
}
render(){
return (
<div>
<button id="buttonC" onClick={this._handleClick}>click Me</button>
<h1>click Count{this.state.count}</h1>
</div>
)
}
}
export default ClickCounter;
请留意这块代码:
componentDidMount(){
console.log($("#buttonC").get(0));
$("#buttonC").click(function(){
$(this).after("<div>我是jquery创建的元素</div>")
})
}
执行结果如下:每点击一次按钮会在后面添加一个div元素:
神奇吧,又可以写自己熟悉的代码咯。当然再次强调下,不到万不得已不要直接用jquery操作dom。毕竟不提倡。