reactjs - microsoft - ¿Cómo asignar la escritura correcta a React.cloneElement cuando se le dan propiedades a los niños?

typescript vs es7

Question

Estoy usando React y Typescript. Tengo un componente de reacción que actúa como un envoltorio y deseo copiar sus propiedades a sus hijos. Estoy siguiendo la guía de React para usar el elemento de clonación: https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement . Pero al usar React.cloneElement , obtengo el siguiente error de Typescript:

Argument of type ''ReactChild'' is not assignable to parameter of type ''ReactElement<any>''.at line 27 col 39
Type ''string'' is not assignable to type ''ReactElement<any>''.

¿Cómo puedo asignar la escritura correcta a react.cloneElement?

Aquí hay un ejemplo que replica el error anterior:

import * as React from ''react'';
interface AnimationProperties {
width: number;
height: number;
}
/**
* the svg html element which serves as a wrapper for the entire animation
*/
export class Animation extends React.Component<AnimationProperties, undefined>{
/**
* render all children with properties from parent
*
* @return {React.ReactNode} react children
*/
renderChildren(): React.ReactNode {
return React.Children.map(this.props.children, (child) => {
return React.cloneElement(child, { // <-- line that is causing error
width: this.props.width,
height: this.props.height
});
});
}
/**
* render method for react component
*/
render() {
return React.createElement(''svg'', {
width: this.props.width,
height: this.props.height
}, this.renderChildren());
}
}

Answer 1

El problema es que la definición de ReactChild es la siguiente:

type ReactText = string | number;
type ReactChild = ReactElement<any> | ReactText;

Si estás seguro de que ese child siempre es un elemento de ReactElement , ReactElement .

return React.cloneElement(child as React.ReactElement<any>, {
width: this.props.width,
height: this.props.height
});

De lo contrario, utilice la protección de tipo isValidElement :

if (React.isValidElement(child)) {
return React.cloneElement(child, {
width: this.props.width,
height: this.props.height
});
}

(No lo he usado antes, pero de acuerdo con el archivo de definición está ahí)