Мне нужно использовать use forwardRef для пересылки ссылки на дочерний компонент. Приведенное ниже работает нормально, но в идеале я бы не стал полагаться на элемент 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>
);
});
Однако приведенное ниже не работает, так как ссылка не пересылается (потому что Link на самом деле является HOC?).
Можно ли пройти innerRef по Ссылке?
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>
);
});





Компонент Link имеет реквизит innerRef, который вы можете использовать для передачи ссылки на элемент, отображаемый компонентом.
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>
);
});