Come si esegue il rendering di una stringa come elementi secondari in un componente React?

Question

Prendere un semplice componente:

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

Questo funziona:

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

ma questo non lo fa (ho tolto il <span/>):

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

perché Reagire tenta di chiamare il render la stringa:

Uncaught TypeError: inst.render is not a function 

D'altra parte, questo funziona bene:

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

Come faccio <MyComponent/> si comportano come <p/>?

Answer 1

È necessario almeno un elemento HTML di primo livello. Il tuo componente non può realmente produrre solo una stringa, non è così che funziona React.

La soluzione più semplice consiste semplicemente nel rendere il tuo MyComponent in modo che venga stampato in uno span o in un div.

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

Answer 2

Beh, la differenza è <p> è un elemento html e MyComponent è un Reagire componente.

I componenti di React devono rendere/restituire o un singolo componente o un singolo elemento html.

'Hello' non è né.

Answer 3

React può eseguire il rendering di componenti React (classi) o tag HTML (stringhe). Qualsiasi tag HTML è per convenzione in lettere minuscole in cui un componente è in maiuscolo. Ogni componente React deve rappresentare esattamente un Tag (o null). Per rispondere alla tua domanda: non puoi.

Nell'esempio sopra, si esegue il rendering di ciò che viene fornito con l'attributo children dove questo renderà il tag all'interno o una stringa che non è valida.

Answer 4

Attualmente, nel rendering di un componente, è possibile restituire solo un nodo; se hai, per esempio, un elenco di div da restituire, devi avvolgere i tuoi componenti all'interno di un div, span o qualsiasi altro componente.

source

E che si restituisce non è un nodo principale. Si sta restituendo un componente di risposta che restituisce una stringa in cui deve essere restituito un elemento HTML.

È possibile passare la stringa già avvolto con un elemento HTML (come hai già fatto nel tuo esempio) o si può avvolgere la stringa in un elemento HTML all'interno del vostro "MyComponent" come questo

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