reactjs - 如何将 React.forwardRef 与 @material/react-ripple 一起使用？

Question

我正在尝试将@material/react-ripple添加到我的按钮中。我预先存在的组件使用React.forwardRef((props, ref) => ...).

但是，@material/react-ripple（根据自述文件）想要控制我的 ref（通知initRipple）：

import {withRipple} from '@material/react-ripple';

const Icon = (props) => {
  const {
    children,
    className = '',
    // You must call `initRipple` from the root element's ref. This attaches the ripple
    // to the element.
    initRipple,
    // include `unbounded` to remove warnings when passing `otherProps` to the
    // root element.
    unbounded,
    ...otherProps
  } = props;

  // any classes needed on your component needs to be merged with
  // `className` passed from `props`.
  const classes = `ripple-icon-component ${className}`;

  return (
    <div
      className={classes}
      ref={initRipple}
      {...otherProps}>
      {children}
    </div>
  );
};

我怎样才能解决这个问题，并保持我的 ref 转发能力？