reactjs - starter - ¿Cómo restrinjo el tipo de React Children en TypeScript, utilizando el soporte recién agregado en TypeScript 2.3?

react with typescript or not

Question

Estoy tratando de aprovechar el soporte recientemente agregado para escribir niños en el compilador TypeScript y @ types / react, pero con dificultades. Estoy usando la versión 2.3.4 de TypeScript.

Di que tengo un código como este:

interface TabbedViewProps {children?: Tab[]}
export class TabbedView extends React.Component<TabbedViewProps, undefined> {

  render(): JSX.Element {
    return <div>TabbedView</div>;
  }
}

interface TabProps {name: string}
export class Tab extends React.Component<TabProps, undefined> {
  render(): JSX.Element {
    return <div>Tab</div>
  }
}

Cuando trato de usar estos componentes así:

return <TabbedView>
  <Tab name="Creatures">
    <div>Creatures!</div>
  </Tab>
  <Tab name="Combat">
    <div>Combat!</div>
  </Tab>
</TabbedView>;

Me sale un error de la siguiente manera:

ERROR in ./src/typescript/PlayerView.tsx
(27,12): error TS2322: Type ''{ children: Element[]; }'' is not assignable to type ''IntrinsicAttributes & IntrinsicClassAttributes<TabbedView> & Readonly<{ children?: ReactNode; }> ...''.
  Type ''{ children: Element[]; }'' is not assignable to type ''Readonly<TabbedViewProps>''.
    Types of property ''children'' are incompatible.
      Type ''Element[]'' is not assignable to type ''Tab[] | undefined''.
        Type ''Element[]'' is not assignable to type ''Tab[]''.
          Type ''Element'' is not assignable to type ''Tab''.
            Property ''render'' is missing in type ''Element''.

Parece que se está inferiendo el tipo de niños como solo Element[] lugar de Tab[] , aunque ese es el único tipo de niños que estoy usando.

EDITAR: También estaría bien restringir la interfaz de los accesorios de los niños en lugar de restringir el tipo de componentes de los niños directamente, ya que todo lo que tengo que hacer es sacar algunos accesorios específicos de los componentes de los niños.

Answer 1

Debe intentar establecer hijos de la interfaz TabbedViewProps como tal

interface TabbedViewProps { children?: React.ReactElement<TabProps>[] }

La idea aquí es no decirle a su TabbedView tiene una matriz de Tab , sino que le dice a su TabbedView que tiene una matriz de element que tiene accesorios específicos. En su caso TabProps .

Editar (gracias a Matei):

interface TabbedViewProps {
    children?: React.ReactElement<TabProps>[] | React.ReactElement<TabProps>
}

Answer 2

El tipo que está devolviendo en el método de procesamiento de tabulación es JSX.Element. Esto es lo que causa tu problema. TabbedView está esperando una matriz de niños con el tipo Tab. No estoy seguro de si puede especificar un determinado componente como un tipo secundario. Puede ser string o JSX.Element. ¿Puedes mostrar el archivo de definición de Tab?

Mire https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts para ver cómo se ve la interfaz JSX.Element.