用react又怎么实现呢

好的，下面是一个简单的React组件实现水波纹循环动画的示例代码：

import React, { useState } from 'react';
import './Ripple.css';

const Ripple = () => {
  const [ripples, setRipples] = useState([]);

  const addRipple = (event) => {
    const x = event.clientX - event.target.offsetLeft;
    const y = event.clientY - event.target.offsetTop;
    const size = Math.min(event.target.offsetWidth, event.target.offsetHeight);
    setRipples([...ripples, { x, y, size }]);

    // remove the oldest ripple after 1s
    setTimeout(() => {
      setRipples(ripples.slice(1));
    }, 1000);
  };

  return (
    <div className="ripple" onClick={addRipple}>
      {ripples.map((ripple, index) => (
        <div
          key={index}
          className="ripple-circle"
          style={{ top: ripple.y + 'px', left: ripple.x + 'px', width: ripple.size + 'px', height: ripple.size + 'px' }}
        ></div>
      ))}
    </div>
  );
};

export default Ripple;

这个组件会在点击时添加一个水波纹效果，并在1秒后自动消失。你可以根据自己的需求调整动画效果、大小和持续时间。