Tengo problemas para configurar los tipos adecuados para los niños reactivos.
export const recursiveCloneChildren = ( children: React.ReactNode, handleChildChange, disableContent: boolean, ) => { return React.Children.map(children, (child) => { if (!isObject(child)) { return child; } let childProps = { ...child.props, disabled: child.props.disabled || disableContent, }; const requiredOrValidatableChildProps = { ...childProps, checkValidationState: handleChildChange, }; if (child.props.required || child.props.validatable) { childProps = { ...requiredOrValidatableChildProps, }; } if (child.props.children) { childProps.children = recursiveCloneChildren(child.props.children, handleChildChange, disableContent); } return React.cloneElement(child, childProps); }); };estoy recibiendo este error
La propiedad 'props' no existe en el tipo '{} | ReactElement<cualquiera, cadena | JSXElementConstructor> | ReactNodeArray | ReactPortal'.
La propiedad 'props' no existe en el tipo '{}'.
Intenté establecer tipos para niños directamente ( React.ReactChild ) y mostré otro error en niños. ¿Cómo se puede solucionar?
Realmente no me gusta lo que estás tratando de hacer, porque si lo encontrara en un código base, estaría realmente confundido.
Pero para responder a tu pregunta. El argumento child en la función que se pasa a Children.map es de tipo ReactNode . Este es el tipo más general, lo que significa que puede terminar con casi cualquier cosa que pueda ser un niño válido. En realidad, no sé si su código funcionará, pero teniendo en cuenta que desea acceder a los accesorios, asumo que lo que desea es asegurarse de que está operando en ReactElement . En ese caso, su verificación de isObject no es lo suficientemente exhaustiva. Lo que necesitas es un tipo de guardia.
Entonces, la opción rápida y sucia es escribir su propio tipo de protección y algo como esto es suficiente:
function isReactElement(child: React.ReactNode): child is React.ReactElement { return isObject(child) && 'props' in child; }y luego en lugar de
if (!isObject(child)) { return child; }solo lo haces
if (!isReactElement(child)) { return child; } y funciona. Sin embargo, probablemente una mejor idea es usar la biblioteca react-is , que es una biblioteca oficial mantenida por Facebook y se usa ampliamente en muchas bibliotecas React y hace básicamente exactamente lo que desea, pero las comprobaciones son significativamente mejores que las que propuse anteriormente. En su caso, querrá usar isElement , de la misma manera que mostré arriba. Solo asegúrese de instalar @types/react-is también.