eine einzige Reaktion untergeordnete Komponente in Typoskript (TSX) Erfordern

Question

Wenn ich eine Schnittstelle, die ein einzelnes Kind überschreibt und gibt an, so etwas wie:

interface Props extends React.HTMLProps<HTMLDivElement> { 
    children?: React.ReactElement<any>; 
} 

class MyComponent extends React.Component<Props, {}> { 
    // ... 
} 

IntelliSense zeigt korrekt das einzelne Element Kind prop Typ, aber ich kann verwenden, um eine Komponente mit diesen Requisiten mit mehreren untergeordneten Komponenten ohne Fehler:

<MyComponent> 
    <div>hello</div> 
    <div>world</div> 
</MyComponent> 

Dies kompiliert fein mit Typoskript 1.8.30.0, aber zur Laufzeit bricht:

Invariant Violation: ReactDOM.render(): Invalid component element. 

Es funktioniert mit nur einem untergeordneten Element <div/>, da der Komponentencode für dieses Szenario geschrieben wird. Das scheint mir ein Fehler zu sein - ich habe erwartet, dass es bemerkt, dass zwei <div/> Elemente nicht mit der Definition von children übereinstimmen. Ich dachte, ich würde hier zuerst fragen, bevor ich eine Ausgabe öffne, falls ich etwas verpasse.

Ist es möglich, nur ein einziges Kind über this.props.children anzufordern, oder muss ich eine bestimmte Stütze hinzufügen?

Answer 1

Hier finden Sie die relevanten Informationen.

Single Child

zitieren:

Mit React.PropTypes.element können Sie nur ein einziges Kind zu einer Komponente als Kinder angeben, dass übergeben werden kann.

Es ist möglich, nur ein Kind zu erzwingen.

var MyComponent = React.createClass({ 
    propTypes: { 
    children: React.PropTypes.element.isRequired 
    }, 

    render: function() { 
    return (
     <div> 
     {this.props.children} // This must be exactly one element or it will warn. 
     </div> 
    ); 
    } 
});