Können verschachtelte Reaktionskomponenten unterschiedliche Requisiten haben?

Question

Ich bin neu in react.js und ich habe gerade angefangen, ein Buch zu lesen, das verschachtelte Komponenten zeigt und zeigt, wie ein Attribut an das Kindelement übergeben wird. Dies ist das Beispiel.

var GreetingComponent = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
} 
}); 

var GenericComponent = React.createClass({ 
    render: function() { 
    return <GreetingComponent name={this.props.name} />; 
} 
}); 

React.render(<GenericComponent name="World" />, 
document.getElementById('container')); 

Als das Buch sagt: „Ausgehend von einem Top-Level-Attribute auf dem GenericComponent, dieses Attribut unter Verwendung this.props das Kind Element GreetingComponent passieren kann.“ und deshalb wird "Hallo Welt" gerendert.

Aber was, wenn ich, für die Zwecke der Beweis wollen, die gleiche Struktur, aber ich alle Komponenten eine andere Stütze Wert, wie

var GreetingComponent = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.anotherName}</div>; 
} 
}); 

var GenericComponent = React.createClass({ 
    render: function() { 
    return <GreetingComponent name={this.props.name} />; 
} 
}); 

React.render(<GenericComponent name="World" anotherName="Earth"/> 
document.getElementById('container')); 

es haben wollen prüfen here.

Dies funktioniert nicht und nichts wird gerendert.

Wie kann ich zwei verschachtelte Komponenten mit unterschiedlichen Prop-Werten haben? Bitte erklären und helfen Sie mir zu verstehen.

Vielen Dank.

Answer 1

Für <GreetingComponent name={...} /> zu arbeiten, müssen GreetingComponent eine name Eigenschaft haben.

Da GenericComponent macht GreetingComponent, müssen Sie den Namen GenericComponent als Eigenschaft übergeben, greetingName zum Beispiel genannt wird, so dass es zu GreetingComponent als name passieren.

Nun möchten Sie GenericComponent einen eigenen Namen haben, also müssen Sie ihm eine zweite Stütze geben.

Siehe eine Lösung hier: https://jsfiddle.net/5kk90t0k/.