Einzel Kind und „onlyChild muss ein Kind mit genau einem Kind weitergegeben werden“

Question

Wenn ich children prop Reagieren des richtig verstehen:

• children ist normalerweise ein Array, aber wenn es nur ein Kind ist, gibt es, dass einzelnes Kind . (source)
• children ist „undurchsichtig“, so Anwendungscode offenbar nicht verlassen sollte. (source)
• React.children.count kehrt 1, wenn nur ein Kind.
• React.children.only sollte das einzige Kind bekommen.

auf dieser Grundlage würde ich der folgende Code erwarten zu arbeiten: Statt

const Sample = ({children, ...props}) => { 
    if (React.Children.count(children) === 1) { 
    doSomethingWith(React.Children.only(children)); 
    } 

    // etc. 
}; 

<Sample>Hello, world!<Sample>; 

, wirft es die folgenden Fehler:

onlyChild must be passed a children with exactly one child

Warum?

Answer 1

Das Problem ist, dass React.Children.only erwartet, dass das einzige Kind ein gültiges React Element ist, nicht eine renderbare Zeichenfolge oder Nummer.

Ich verstehe nicht wirklich die Begründung oder Anwendungsfall dafür, aber Reagieren 15.3.1 mindestens improves the error message ("React.Children.only erwartet, ein einzelnes React Element Kind zu erhalten").

React issue #1104 diskutiert diese weiter.

Die Lösung ist offenbar React.Children.only zu ignorieren und gehen Sie vor und Zugriff auf die einzelnen children Element direkt:

if (React.Children.count(children) === 1) { 
    doSomethingWith(children); 
    }