reactjs - Hvordan tildele riktig typing til React.cloneElement når man gir egenskaper til barn?

Jeg bruker React og Typescript. Jeg har en React-komponent som fungerer som en wrapper, og jeg ønsker å kopiere dens egenskaper til barna. Jeg følger Reacts guide for å bruke clone element: https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement. Men når jeg bruker React.cloneElement får jeg følgende feil fra 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>'.

Hvordan kan jeg tildele riktig typing til react.cloneElement?

Her er et eksempel som gjenskaper feilen ovenfor:

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());
    }
}

Svar #1

Problemet er at definisjonen for ReactChild er denne:

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

Hvis du er sikker på at child alltid er et ReactElement, så kast det:

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

Ellers bruk isValidElement-typebeskyttelsen:

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

(Jeg har ikke brukt det før, men ifølge definisjonsfilen er det der)

Svar #2

Dette løste det for meg:

React.Children.map<ReactNode, ReactNode>(children, child => {
    if(React.isValidElement(child)) {
      return React.cloneElement(child, props
      )
    }
  }

ganske enkel løsning

Relaterte artikler