如何在React JS中使用jQuery？及将日期范围选择器代码转为React格式

一、React中集成jQuery的核心要点 #

• 先通过npm安装依赖：npm install jquery daterangepicker
• 必须导入插件的CSS文件，否则样式会失效
• 利用React的生命周期钩子（函数组件用useEffect，类组件用componentDidMount）初始化插件，确保DOM元素已渲染完成
• 组件卸载时要销毁插件实例，避免内存泄漏

二、转换后的React组件实现 #

函数组件版本（推荐） #

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
import 'daterangepicker/daterangepicker.css';
import 'daterangepicker';

const DateRangePicker = () => {
  const demoRef = useRef(null);

  useEffect(() => {
    if (demoRef.current) {
      // 初始化日期范围选择器
      $(demoRef.current).daterangepicker({
        startDate: "01/21/2023",
        endDate: "01/27/2023"
      }, function(start, end, label) {
        console.log(`New date range selected: ${start.format('YYYY-MM-DD')} to ${end.format('YYYY-MM-DD')} (predefined range: ${label})`);
      });
    }

    // 组件卸载时清理插件实例
    return () => {
      demoRef.current && $(demoRef.current).daterangepicker('destroy');
    };
  }, []);

  return <input ref={demoRef} id="demo" type="text" />;
};

export default DateRangePicker;

类组件版本 #

import React, { Component } from 'react';
import $ from 'jquery';
import 'daterangepicker/daterangepicker.css';
import 'daterangepicker';

class DateRangePicker extends Component {
  constructor(props) {
    super(props);
    this.demoRef = React.createRef();
  }

  componentDidMount() {
    $(this.demoRef.current).daterangepicker({
      startDate: "01/21/2023",
      endDate: "01/27/2023"
    }, function(start, end, label) {
      console.log(`New date range selected: ${start.format('YYYY-MM-DD')} to ${end.format('YYYY-MM-DD')} (predefined range: ${label})`);
    });
  }

  componentWillUnmount() {
    $(this.demoRef.current).daterangepicker('destroy');
  }

  render() {
    return <input ref={this.demoRef} id="demo" type="text" />;
  }
}

export default DateRangePicker;

关键说明 #

• 使用useRef/createRef获取DOM节点，比直接用$('#demo')更可靠，适配React异步DOM更新机制
• 清理函数是必须的，防止组件卸载后残留插件实例导致内存泄漏
• 用模板字符串替换原有的字符串拼接，代码更简洁

内容的提问来源于stack exchange，提问作者DP Patel