reactjs - Typescript + React, rendre en array fra en stateless funksjonell komponent

React-teamet kunngjorde at siden React 16:

Du kan nå returnere et array av elementer fra en komponents render-metode.

Dette fungerer i TypeScript for vanlige klassekomponenter, men jeg får det ikke til å fungere for statsløse funksjonelle komponenter.

Se dette depotet hvis du vil gjenskape det selv.

Kode :

import * as React from 'react';

// See this example working in a non-TS environment: https://codesandbox.io/s/ppl3wopo8j
class Hello extends React.Component {
    render() {
        return <div>
        <Foo />
        <Bar /> {/* Error: 'JSX element type 'Element[]' is not a constructor function for JSX elements. */}
      </div>;
    }
}

class Foo extends React.Component {
    render() {
        return [<div>foo</div>, <div>fooz</div>];
    }
}

function Bar() {
    // Cannot render an array from a SFC
    return [<div>bar</div>, <div>baz</div>];
}

Å bygge dette snippetet resulterer i følgende feil:

'JSX element type 'Element[]' is not a constructor function for JSX elements.
  Property 'render' is missing in type 'Element[]'.'

Som du kan se, fungerer det å rendre et array fra en vanlig klassekomponent, men det feiler når du rendre et array fra en stateless funksjonell komponent.

Jeg er usikker på om problemet ligger i koden/konfigurasjonen min, DefinitelyTyped React-typene, eller med TypeScript selv.

Svar #1

Inntil det åpne Definitely Typed-problemet er løst, er den beste løsningen sannsynligvis bare å bruke <React.Fragment/> i stedet. For funksjonelle formål, tror jeg ikke det er noen forskjell:

const Bar: React.SFC<CheckoutProps> = (props) => {
  return (
    <React.Fragment>
      <div>bar</div>
      <div>baz</div>
    </React.Fragment>
  );
};

Svar #2

Du kan nå returnere et array av elementer fra en komponents render-metode.

Arrayet av JSX blir kompilert av React.Components render-metoden. En statsløs funksjonell komponent mangler den render-metoden.

Du kan enten pakke inn arrayet ditt av elementer i en overordnet div i stedet for arrayet, eller bruke en vanlig klassekomponent.

Relaterte artikler