jquery组件怎样在react中使用?

React中整合jQuery
本文详细介绍如何在React项目中集成jQuery并正确使用。首先通过dva创建项目并配置Webpack以支持jQuery全局变量。接着展示了如何在组件挂载后利用jQuery操作DOM,包括添加事件监听和动态插入元素。

转载: https://blog.youkuaiyun.com/weiyongliang_813/article/details/74985924

react的生命周期,render之后会触发componentDidMount,所以jquery的调用自然就需要放到该方法里面咯 

第一步:采用dva创建项目,并用webstore来打开项目

第二步:安装jquery插件,使用命令行下载jquery

npm install --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元素: 
这里写图片描述

转载2: http://www.jb51.net/article/123504.htm

在React中引用Jquery比较好玩,获取元素的数据更多

1.引入方法举例:

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对应起来

<think>好的,用户的问题是在现有的jQuery项目中集成React组件,并使用Webpack进行打包。我需要先理解用户的需求,然后逐步给出解决方案。 首先,用户的项目目前是基于jQuery的,现在想要引入React组件。这可能是因为React组件化和维护性上有优势,而用户希望逐步迁移或增强现有功能。接下来需要考虑的是如何让ReactjQuery共存,以及如何配置Webpack来打包这两种库。 我记得Webpack可以处理多种模块类型,所以需要确保配置正确。用户可能已经有一些Webpack配置,但需要调整以适应React。可能需要安装React相关的依赖,比如reactreact-dom,以及Babel来转换JSX。 另外,用户可能需要在现有HTML文件中引入打包后的脚本,并确保React组件能够正确挂载到DOM节点。同时,公共库如jQueryReact可能需要分开打包,比如使用vendor来优化缓存。 还要考虑代码中的兼容性问题,比如在React组件中调用jQuery插件,或者反过来。可能需要使用ref来访问DOM节点,并在componentDidMount中初始化jQuery插件。 最后,要确保Webpack的配置正确,比如入口文件、加载器、插件等,特别是处理JSX的babel-loader,以及可能需要的CSS或其他资源加载器。可能还需要开发服务器的配置,如HMR,但用户的问题主要是关于打包,所以这部分可能不是重点。 总结下来,步骤应该是:安装依赖、配置Webpack、调整项目结构、编写React组件、在jQuery中挂载组件,处理公共库分离,最后测试打包结果。</think>以下是在jQuery项目中集成React组件并通过Webpack打包的详细步骤: ### 一、项目初始化 1. 安装基础依赖(在项目根目录执行) ```bash npm init -y npm install react react-dom jquery npm install webpack webpack-cli babel-loader @babel/core @babel/preset-react @babel/preset-env html-webpack-plugin --save-dev ``` ### 二、Webpack配置 创建`webpack.config.js`: ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { main: './src/index.js', vendor: ['jquery', 'react', 'react-dom'] // 公共库分离[^4] }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], optimization: { splitChunks: { chunks: 'all' } } }; ``` ### 三、项目结构调整 ``` project-root/ ├── src/ │ ├── components/ │ │ └── ReactWidget.jsx │ ├── jquery-app.js │ └── index.html ├── package.json └── webpack.config.js ``` ### 四、React组件开发 `src/components/ReactWidget.jsx`: ```javascript import React from 'react'; export default function ReactWidget() { return ( <div className="react-component"> <h3>React组件已加载</h3> <button onClick={() => console.log('React事件触发')}> 测试按钮 </button> </div> ); } ``` ### 五、jQueryReact集成 `src/jquery-app.js`: ```javascript import $ from 'jquery'; import React from 'react'; import ReactDOM from 'react-dom'; import ReactWidget from './components/ReactWidget.jsx'; // 传统jQuery代码 $(document).ready(function() { $('#jquery-section').html('<p>jQuery初始化完成</p>'); // 创建React挂载点 const reactMount = $('<div>').attr('id', 'react-root'); $('body').append(reactMount); // 渲染React组件 ReactDOM.render( <ReactWidget />, document.getElementById('react-root') ); // jQueryReact交互示例 $(document).on('click', '.react-component button', function() { $('#jquery-section').append('<p>捕获到React事件</p>'); }); }); ``` ### 六、HTML模板 `src/index.html`: ```html <!DOCTYPE html> <html> <head> <title>jQuery+React整合示例</title> </head> <body> <div id="jquery-section"></div> <!-- Webpack会自动注入打包后的脚本 --> </body> </html> ``` ### 七、构建与测试 1. 在`package.json`中添加构建命令: ```json "scripts": { "build": "webpack --mode production", "start": "webpack serve --mode development" } ``` 2. 启动开发服务器: ```bash npm run start ``` ### 关键点说明 1. **依赖管理**:通过`vendor`入口实现第三方库分离打包,优化缓存策略[^4] 2. **Babel配置**:使用`@babel/preset-react`处理JSX语法转换 3. **DOM交互**:通过`ReactDOM.render()`在jQuery创建的DOM节点中挂载React组件 4. **事件通信**:使用jQuery事件代理监听React组件触发的事件 5. **构建优化**:`splitChunks`配置自动分离公共模块
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值