Wie rende ich eine Zeichenfolge als untergeordnete Elemente in einer React-Komponente?

Question

eine einfache Komponente nimmt:

function MyComponent({ children }) { 
    return children; 
} 

Dies funktioniert:

ReactDOM.render(<MyComponent><span>Hello</span></MyComponent>, document.getElementById('stage')); 

aber nicht (Ich entfernte die <span/>):

ReactDOM.render(<MyComponent>Hello</MyComponent>, document.getElementById('stage')); 

weil Reagieren versucht render auf anrufen die Zeichenkette:

Uncaught TypeError: inst.render is not a function 

Auf der anderen Seite, das funktioniert gut:

ReactDOM.render(<p>Hello</p>, document.getElementById('stage')); 

Wie kann ich <MyComponent/> verhalten sich wie <p/>?

Answer 1

Sie benötigen mindestens ein Top-Level-HTML-Element. Ihre Komponente kann nicht wirklich nur eine Zeichenfolge ausgeben, so funktioniert React nicht.

Die einfachste Lösung ist einfach Ihre MyComponent wickeln Sie es in einem Bereich oder div.

function MyComponent({ children }) { 
    return <span>{ children }</span>; 
} 

Answer 2

Nun ist der Unterschied <p> ein html-Element ist und MyComponent ist eine Komponente reagieren.

Reaktive Komponenten müssen entweder eine einzelne Komponente oder ein einzelnes HTML-Element rendern/zurückgeben.

'Hello' ist weder.

Answer 3

React kann entweder Komponenten (Klassen) oder HTML-Tags (Strings) replizieren. Jedes HTML-Tag ist nach Konvention in Kleinbuchstaben geschrieben, wo eine Komponente groß geschrieben ist. Jede React-Komponente muss genau ein Tag (oder null) darstellen. Um Ihre Frage zu beantworten: Sie können nicht.

Im obigen Beispiel rendern Sie, was mit dem Attribut children angegeben wird, in dem das Tag innerhalb oder eine ungültige Zeichenfolge dargestellt wird.

Answer 4

Derzeit können Sie beim Rendern einer Komponente nur einen Knoten zurückgeben; Wenn Sie haben, sagen wir, eine Liste von divs zurückgeben, müssen Sie Ihre Komponenten innerhalb eines div, span oder einer anderen Komponente umbrechen.

source

Und was Sie Rückkehr ist kein Root-Knoten. Sie geben eine Antwortkomponente zurück, die eine Zeichenfolge zurückgibt, an die ein HTML-Element zurückgegeben werden soll.

Sie können entweder Ihren String übergeben bereits mit einem HTML-Elemente gewickelt (wie Sie bereits in Ihrem Beispiel haben) oder Sie können Ihren Text in einem HTML-Elemente in Ihrem „MyComponent“ wie diese

function MyComponent({ children }) { 
    return <span>{ children }</span>; 
} 

wickeln