将 forwardRef 与 Link 组件一起使用

Question

I need use use forwardRef to forward a ref to a child component. The below works fine, but ideally I would not rely on a div element to wrap the link, as it makes styling the link awkward.

const RoleCard = forwardRef((props, innerRef) => {
    return (
        <div ref={innerRef} className="RoleCard" key={props.role.id}>
            <Link
                to={{
                    pathname: `roles/${props.role.slug}`
                }}
            >
                <div className="RoleCard__Inner">
                    <span className="RoleCard__Title">{props.role.title}</span>
                    <div className="RoleCard__Body">
                        {props.role.description}
                    </div>
                </div>
            </Link>
        </div>
    );
});

However, the below doesn't work, as the ref is not forwarded (because Link is actually a HOC?).

Is it possible to pass the innerRef through the Link?

const RoleCard = forwardRef((props, innerRef) => {
    return (
        <Link
            ref={innerRef}
            className="RoleCard"
            key={props.role.id}>
            to={{
                pathname: `roles/${props.role.slug}`
            }}
        >
            <div className="RoleCard__Inner">
                <span className="RoleCard__Title">{props.role.title}</span>
                <div className="RoleCard__Body">
                    {props.role.description}
                </div>
            </div>
        </Link>
    );
});

Answer 1

The Link component has a innerRef prop that you can use to pass a ref to the element rendered by the component.

const RoleCard = forwardRef((props, innerRef) => {
  return (
    <Link
      innerRef={innerRef}
      className="RoleCard"
      key={props.role.id}
      to={{
        pathname: `roles/${props.role.slug}`
      }}
    >
      <div className="RoleCard__Inner">
        <span className="RoleCard__Title">{props.role.title}</span>
        <div className="RoleCard__Body">{props.role.description}</div>
      </div>
    </Link>
  );
});