如何在功能组件ReactJs中使用jQuery？

如何解决如何在功能组件ReactJs中使用jQuery？

我有一个功能类组件，可以从类组件中接收道具。 jQuery脚本在此组件中不起作用。

Cards.js：

import $ from 'jquery';

const Cards = (props) => {
  
  $(document).ready(function() {
    $('.w-card').click(function() {
      $(this).toggleClass('w-card-active').siblings().removeClass('w-card-active');
    });
  });

  const data = props.data ? props.data.map((donne) => {
  return (
    <div className="w-card" key={donne.date_epoch} id={donne.date_epoch}>
      <span className="w-card-title">
        { donne.date }
      </span>........);

  return (
    <div className="w-cards pb-2 center-lg center-md center-sm">
      {data}
    </div>
  );

}
 
export default Cards;

即使在Class组件中，我的componentDidMount组件也无法在Cards.js上运行