javascript - ¿Convertir jsx en componente de react?

Supongamos que tengo un componente llamado 'MyComponent', y quiero almacenarlo en una variable de tipo 'MyComponent' en TypeScript pero usar el elemento JSX para inicializarlo, algo así:

let comp: MyComponent = <MyComponent somePropInit={3} />

El código anterior genera errores como:

Falta la propiedad 'componentDidMount' en el tipo 'Element'

Componente actual que estoy usando:

export class PlayCard extends React.Component<AllCardProps, {}> {
    addToDeck(){...}

cómo estoy intentando almacenarlo (he probado muchas cosas diferentes, incluyendo usar typeof, Card.PlayCard, PlayCard, etc):

import * as Card from './PlayCard'
...
let c: Card.PlayCard = <PlayCard Id={32} />

^si intento lo anterior obtengo un error

«La propiedad 'addToDeck' falta en el tipo 'Component<...>'»

Si elimino addToDeck, el error se traslada a la siguiente función. ¿Parece que cualquier función que exista lo altera de alguna manera?

¿Cómo lograría esto?

Respuesta #1

Los métodos del ciclo de vida para un componente de React son valores opcionales.

A continuación se muestra el ejemplo de la interfaz:

interface ComponentLifecycle < P, S > {
    /**
     * Called immediately before mounting occurs, and before `Component#render`.
     * Avoid introducing any side-effects or subscriptions in this method.
     */
    componentWillMount ? () : void;
    /**
     * Called immediately after a compoment is mounted. Setting state here will trigger re-rendering.
     */
    componentDidMount ? () : void;

Entonces el error no está en React/TypeScript. Podrías haber utilizado una interfaz que está causando el problema.

Referencia :

• @Types/React/index.d.ts: consultar la línea número 355.