Задать вопрос
@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 комментарий
Пригласить эксперта
Ответы на вопрос 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 Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽