Funktionen der React-Komponenten

Question

Ich möchte den React-Code unten verstehen; Insbesondere nehme ich an, dass die Komponente davon Rendern ist, aber die "Willkommen" im oben genannten Snippet bezieht sich auf die "Willkommen" -Funktion an der Spitze und dass das Rendinring die Funktion durch 3 Iterationen, eine für jeden Namen? ?

...

function Welcome(props) { 
    return <h1>Hello, {props.name}</h1>; 
} 

function App() { 
    return (
    <div> 
     <Welcome name="Sara" /> 
     <Welcome name="Cahal" /> 
     <Welcome name="Edite" /> 
    </div> 
); 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('root') 
); 

Answer 1

Dies ist ein Beispiel für Composing Components.

Komponenten können sich auf andere Komponenten in ihrer Ausgabe beziehen.

Dies bedeutet, dass wir mehrere Komponenten innerhalb einer Komponente verschachteln können. Dies wird normalerweise als Eltern/Kind-Komponenten bezeichnet. Eine übergeordnete Komponente kann viele untergeordnete Komponenten darstellen.

Im Beispiel Sie auf dem Laufenden, haben sie ein functional stateless component genannt <Welcome /> erstellt. Die Komponente <App /> ist die übergeordnete Komponente und muss die Komponente <Welcome /> dreimal mit jeweils unterschiedlichen Daten rendern. Sie verwenden props, um einen anderen Namen zu jeder <Welcome /> Komponente zu übergeben.

Wenn die <App /> Komponentendarstellungsmethode aufgerufen wird, wird sie die <Welcome /> Komponente drei verschiedene Male mit jeweils eigenen Requisiten rendern.