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

Question

[Даниил]

Обрабатываю 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 дочернего элемента?

Comments

[Yuriy Vorobyov]

Хотелось бы увидеть не упрощенный код

Answer 1

[Алексей]

На сколько я понял в React.Children.map передается ref только из оригинального компонента, forward ref там отсутствует, именно поэтому тайпскрипт и ругается, что ref не существует.

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

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

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

Comments

[Даниил]

дело в том, как договориться с тайпскриптом, потому что значение есть там, оно правильное, реф не null. Просто тайпскрипт не знает что там есть свойство ref.
Есть тип в котором добавляется это свойство к компоненту это

interface FunctionComponentElement<P> extends ReactElement<P, FunctionComponent<P>> {
    ref?: ('ref' extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;
}

Но я не знаю как это применить правильно

[Алексей]

Сомневаюсь, что у потомка будет ref, который не передан явно через cloneElement в React.Children.map. Ну если оно все работает и проблема не в этом, то что тогда передано в качестве параметра типа при создании рефа? И какие типы у парента, который в себя React.Children.map принимает?

Кстати, сейчас посмотрел типы реакта и как раз при cloneElement children возвращает FunctionComponentElement

[Даниил]

Алексей, в общем, я просто прописал тип children: { children: FunctionComponentElement<object> }

[Алексей]

Мне кажется это неправильный вариант концептуально, если компонент, который создает реф рендерит потомков через React.Children.map, то и реф должен передаваться в потомка на этом этапе через cloneElement, потому что если потомков несколько, то в ref будет только последний. При переопределении ref при клонировании все рефы на потомков будут доступны в родительском ref под соответствующими индексами.

Если же потомок один, то смысл делать map по всем потомкам. Если же рефы отдельно создаются для каждого потомка, то они все равно будут доступны в компоненте, где эти рефы создаются, т.е. выше компонента с map.Children. Вот пример. В общем, на мой взгляд тут в целом со структурой что-то не так, что требуется типы переписывать дефолтные

[Даниил]

Алексей, переопределять ref не нужно, нужно просто его значение, вот, я изменил ваш пример, добавив вывод в SampleLayout Ссылка. Как видите, данные выводятся корректно, осталось договориться с TS
Я пишу hoc и этот реф по сути нужен чтобы передать его в CSSTransition, которым я оборачиваю {child}