Typoskript + Reaktion, ein Array aus einer stateless funktionalen Komponente

Question

Das React Team Rendering announced, die seit 16 Reagieren:

You can now return an array of elements from a component’s render method.

Dies funktioniert für regelmäßige Klassenkomponenten in Typoskript, aber ich kann es nicht für staatenlos funktionelle an der Arbeit Komponenten.

Siehe this repo, wenn Sie für sich selbst reproduzieren möchten.

Code:

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>]; 
} 

Aufbau dieser snipper Ergebnisse in dem folgenden Fehler:

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

Wie Sie sehen können, ein Array von einer regulären Klasse Komponente funktioniert Rendering, aber es funktioniert nicht, wenn ein Rendering Array von einer zustandslosen funktionalen Komponente.

Ich bin mir nicht sicher, ob das Problem mit meinem Code/Setup, den DefinitlyTyped-Reaktionstypen oder mit Typescript selbst liegt.

Answer 1

"Sie können nun ein Array von Elementen aus der Render-Methode einer Komponente zurückgeben."

Das Array von JSX wird von React.Components render Methode kompiliert. Eine zustandslose funktionale Komponente fehlt diese Rendermethode.

Sie können entweder Ihr Array von Elementen in ein Eltern-Div anstelle des Arrays einschließen oder eine reguläre Klassenkomponente verwenden.

Answer 2

können Sie den Fehler unterdrücken und Ihren Code haben durch Gießen Ihrer Komponente als any arbeiten:

const Bar: any =() => [<div>bar</div>, <div>baz</div>]