How to use jquery components in react?

Reprinted: https://blog.csdn.net/weiyongliang_813/article/details/74985924

In the life cycle of react, componentDidMount will be triggered after render, so the call of jquery naturally needs to be placed in this method. 

The first step: use dva to create a project and use webstore to open the project

Step 2: Install the jquery plugin and download jquery using the command line

npm install --save-dev jquery

Step 2: Configure webpack.config.dev.js Because we are using dva to create a project, this file is placed in

/node_modules/roadhog/lib/config/webpack.config.dev.js

Find where the plugin is defined:

 plugins: [new _webpack2.default.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    }),
    .....

changed to:

   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)
        }
      }),
      ...

Step 3: Write a test case

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;

Note this block of code:

  componentDidMount(){
    console.log($("#buttonC").get(0));
    $("#buttonC").click(function(){
      $(this).after("<div>我是jquery创建的元素</div>")
    })
  }

The execution result is as follows: each time the button is clicked, a div element is added behind it: 

Reprint 2: http://www.jb51.net/article/123504.htm

It's more fun to refer to Jquery in React, and get more data from elements

1. Examples of introduction methods:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

import $ from 'jquery' ;   import { Button } from 'antd' ;   class testJquery extends React.Component {   　　constructor(props) { 　　　　 super (props);   　　　　 this .selectElement = this .selectElement.bind( this );   　　}   　　render() {   　　　　 return (   　　　　　　<div>   　　　　　　　　<Button onClick={ this .selectElement}>点击一下</Button>   　　　　　　　　<h4 className= "text" >这是：12</h4>   　　　　　　</div>   　　　　);   　　}   　　selectElement() {   　　　　console.log( 'text对象：' ,$( '.text' ));   　　　　console.log( 'text中的值：' ,$( '.text' )[0].textContent);   　　}   }   export default testJquery;

2.界面样式

3. 控制台打印结果

 4.text对象部分属性

转载3： https://zhidao.baidu.com/question/204486587794519765.html

第一步：npm install --save-dev jquery；----》使用命令行下载jquery
第二步：plugins:[
new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})
]
--------》把jquery的变量挂载到window上；
第三步：使用webpack.ProvidePlugin（）方法给jquery配置全局的变量；这样在js就可以直接用了；不需要再require.
该全局不是挂载到window对象上；只对webpack打包出来的文件有用；
plugins:能使用更多的webpack的api;
调用模块的别名ProvidePlugin，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来