Задать вопрос
@TheCrossCarrier

Какой тип у children с переданным ref?

Обрабатываю children, которые были созданы с forwardRef функцией, так что у них есть свойство child.ref. Но TypeScript выдаёт ошибку
Свойство "ref" не существует в типе "string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal".

Тут можно было бы подумать, что он не может найти свойство ref в примитивах "string | number | boolean", но даже при отсеивании этих типов с помощью typeof, он не может найти свойство ref:
Свойство "ref" не существует в типе "ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal".
  Свойство "ref" не существует в типе "ReactElement<any, string | JSXElementConstructor<any>>".ts(2339)


Вот код (упрощено для примера):
{React.Children.map(props.children, (child) => {
    if (
        typeof child !== 'string' &&
        typeof child !== 'number' &&
        typeof child !== 'boolean'
    ) {
        console.log(child?.ref);
    }
            
    return <div>{child}</div>
})}


Подскажите, какой тип там, или, возможно, я не правильно получаю ref дочернего элемента?
  • Вопрос задан
  • 261 просмотр
Подписаться 1 Средний 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
@slide13
frontend/web-developer
На сколько я понял в React.Children.map передается ref только из оригинального компонента, forward ref там отсутствует, именно поэтому тайпскрипт и ругается, что ref не существует.

Видел только вариант добавить ref в клонированный элемент:

{React.Children.map(props.children, (child, index) =>
  React.cloneElement(child, {
    ref: (ref) => (childrenRef.current[index] = ref)
  })
)}

что в доках реакта не рекомендуется, но по крайней мере это должно работать.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽
IT ATLAS Москва
от 200 000 до 250 000 ₽