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

女爷i 2022-06-12 01:07 251阅读 0赞

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元素：  
![这里写图片描述][SouthEast]

神奇吧，又可以写自己熟悉的代码咯。当然再次强调下，不到万不得已不要直接用jquery操作dom。毕竟不提倡。

[SouthEast]: /images/20220612/38b00bbb849349e0b1fbcad6d7c5ab07.png