javascript - Returnera React 16-arrayelement i TypeScript

Jag vill använda den nya funktionen i React 16 för att returnera array-element i min render men jag får TypeScript-felet Property 'type' is missing in type 'Element[]'

const Elements: StatelessComponent<{}> = () => ([
  <div key="a"></div>,
  <div key="b"></div>
]);

Vad saknas för mig? Använder @types/react 16.0.10 och typescript 2.5.3

Svar #1

Jag har kollat de senaste typerna och de glömde att lägga till nya definitioner i ett gränssnitt för en stateless-komponent. Jag har tagit upp problemet och det borde lösas snart.

Att returnera en array från klasskomponenter fungerar, så om du verkligen behöver det just nu kan du omvandla din funktionella komponent till en klasskomponent.

class Elements extends React.Component<{}> {

  render() {
    return [
       <div key="a"></div>,
       <div key="b"></div>
    ]

  }
}

eller tillfälligt utöka React-typningarna med modulaugmentation. Sätt bara följande kod någonstans i en av dina .ts-filer och TypeScript kommer automatiskt att upptäcka ändringar i definitionerna.

declare module "react" {
  interface StatelessComponent<P = {}> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement<any>[] | ReactElement<any> | null;
    propTypes?: ValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
  }
}

Svar #2

Eller använd React-fragment:

render() {
    return 
       <>
        <div key="a"></div>,
        <div key="b"></div>
       </>
}

Relaterade artiklar