react知识（三） 将Jquery集成进来

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。毕竟不提倡。