Использование forwardRef с компонентом Link

Мне нужно использовать 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>
    );
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
1 487
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Компонент 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>
  );
});

Другие вопросы по теме