Reactjs 将forwardRef与链接组件一起使用

我需要使用

forwardRef

将ref转发给子组件。下面的代码可以很好地工作，但理想情况下，我不会依赖div元素来包装链接，因为这会使链接的样式设计变得笨拙

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>
    );
});

---

链接

组件有一个道具，您可以使用它向组件渲染的元素传递引用

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>
  );
});

const RoleCard=forwardRef（（props，innerRef）=>{
返回(
{props.role.title}
{props.role.description}
);
});

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>
  );
});