reactjs - ¿Cómo usar React.cloneElement con TypeScript?
Tengo el componente que renderiza el contenido de la pestaña. Simplemente detecta si children es un único hijo y, si no lo es, los envuelve en un div. También puede (opcionalmente) aplicar una prop con estilos clonando al hijo. Escribí este componente hace muchos meses, luego actualicé algunas bibliotecas y TypeScript. Hoy estoy revisando su código y veo errores.
El componente
import * as React from 'react';
export interface PageTabContentShape {
title: string;
pageTabName?: string;
withContainer?: boolean;
containerStyle?: React.CSSProperties;
labelTestid?: string;
children: React.ReactElement;
}
export const PageTabContent: React.ComponentType<PageTabContentShape> = (props) => {
let child = React.Children.only(props.children);
if (props.withContainer) {
return (
<div style={props.containerStyle}>
{child}
</div>
);
}
// pass styles to only child when there is no wrapper
if (props.containerStyle && React.isValidElement<{ containerStyle }>(child)) {
child = React.cloneElement(child, { containerStyle: props.containerStyle });
}
if (null != child) {
return child;
}
return null;
};
Errores:
Argument type ReactElement<{containerStyle}> is not assignable to parameter
type DetailedReactHTMLElement<HTMLAttributes<HTMLElement>, HTMLElement>
y
Argument type {containerStyle: React.CSSProperties} is not assignable to parameter
type HTMLAttributes<HTMLElement> | undefined
Lugar de los errores:
Probé diferentes enfoques, agregando comprobaciones de null y retornando temprano con null, agregando afirmaciones de tipo as ReactNode o as ReactElement. Pero no puedo hacer que TypeScript elija otra definición del método cloneElement que veo en index.d.ts de @types/React
Pregunta
¿Cómo puedo declarar correctamente este componente para que los errores de TypeScript desaparezcan? Si es posible, me gustaría hacerlo sin afirmaciones de tipos. Si es posible, necesito hacerlo sin ninguna actualización de NPM (podría considerar una actualización menor).
Paquetes en uso:
- "@types/react": "16.9.1",
- "react": "16.9.0",
- "typescript": "3.8.2",

