如何使用带有 React hooks 的 jQuery 插件？

Question

我正在构建一个 React 应用程序，它使用一些用于 UI 组件的 jQuery 插件，例如日期选择器和滑块。我想使用 React hooks 来管理这些组件的状态和生命周期，但我不确定如何将它们与 jQuery 集成。

例如，如何使用 useEffect 钩子在文本输入元素上初始化日期选择器插件？

当用户使用 useState 钩子更改日期时，如何更新状态？

使用 useRef 钩子卸载组件时如何清理插件？

我试过这样的东西，但它不起作用：

import React, { useState, useEffect, useRef } from “react”; 
import $ from “jquery”; import “jquery-ui/ui/widgets/datepicker”;

function DateInput () { 
  const [date, setDate] = useState (“”); 
  const inputRef = useRef (null);

  useEffect (() => { 
    // initialize datepicker plugin 
    $(inputRef.current).datepicker ({ 
      dateFormat: “yy-mm-dd”, 
      onSelect: function (selectedDate) { 
                  // update state when date changes 
                  setDate (selectedDate); 
                } 
    }); 
    // return a cleanup function 
    return () => { 
      // destroy datepicker plugin 
      $(inputRef.current).datepicker (“destroy”); 
    }; 
  }, []); // run only once

  return ( 
    <div>
      <label htmlFor=“date”>Select a date:</label> <input id=“date” type=“text” ref={inputRef} value={date} /> 
    </div> 
  ); 
}

export default DateInput;

任何人都可以帮助我以正确的方式使用带有 React hooks 的 jQuery 插件吗？谢谢。