2014-02-13 14 views
21

Gibt es ein empfohlenes Muster für die Weitergabe von Requisiten an untergeordnete Komponenten in React?Reagieren: Requisiten an Nachfolger übergeben

Unten, ich bin das Bestehen der Stütze callback zu einer untergeordneten Komponente:

Master = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <ListComp items={this.props.items} callback={this.handleClick} /> 
     </div> 
    ); 
    } 
}); 

ListComp = React.createClass({ 
    render: function() { 

    this.props.items.forEach(function(item) { 
     items.push(<ItemView item={item} callback={this.props.callback} />); 
    }, this); 

    return (
     <ul>{items}</ul> 
    ); 
    } 
}); 

Und dann die callback Stütze wird an die Nachkommen weitergegeben Komponente:

ItemComp = React.createClass({ 
    render: function() { 
    return (
     <li><a onClick={this.handleClick} href="#">Link</a></li> 
    ); 
    }, 

    handleClick: function(e) { 
    e.preventDefault(); 
    this.props.callback(); 
    } 
}); 

Ist es richtig zu passieren die Stütze zweimal so oder soll ich irgendwie auf sein Erbe verweisen?

Ich sehe eine transferPropsTo Methode in der Dokumentation, und es sieht aus wie ich callback aus dem Abkömmling über this.props.__owner__.props bekommen könnte, aber diese Doppel-Doppel Unterstreicht macht ich denke, ich soll nicht von der Anmeldung.

+0

Ich sehe keine Probleme, den Rückruf zweimal zu übergeben. Es erfordert ein wenig mehr tippen, aber es ist explizit und leicht zu verstehen. – NVI

Antwort

23

Ja, das ist idiomatisch. Stellen Sie sich jede Komponente als eine Funktion vor, deren Argumente die Requisiten sind - mit dieser Perspektive scheint das Umgehen der Requisiten deutlich normaler zu sein. Wir haben festgestellt, dass es die Wartbarkeit erhöht, um alles explizit zu machen, sodass Sie sehen können, was alle Eingaben für eine Komponente sind und was genau Sie weitergeben.

(Eine zukünftige Version von React wird wahrscheinlich eine Funktion namens "contexts" enthalten, die es möglich macht, Dinge implizit weiterzugeben, aber es wird wahrscheinlich Code schwieriger zu verstehen machen, so dass ich immer noch die Explizitheit bevorzugen würde .

Official React Context Documentation: Zeit)

UPDATE (nicht vom ursprünglichen Autor)

Die Dokumentation hinzugefügt schließlich wurde (es wurde irgendwann zwischen Sommer 2015 und Sommer 2016 wahrscheinlich mit dem Release 0.14) gegeben.

Beachten Sie, dass dies auch react-redux vereinfacht die Weitergabe von Geschäften durch die Hierarchie.

+3

Nachdem wir mit einer relativ kleinen App von Angular JS gearbeitet haben, klingt die "Kontext" -Funktion wie die Scope-Mechanik von Angular und klingt verwirrend. $ scope vs. $ rootScope, scope injection ... Die Explizitheit der aktuellen Version von React (0.8.0) hat mich überzeugt und lässt die alte JS-Scope-Regel zu. –

+2

@ssorallen Wir sind uns dessen sehr bewusst. Kontexte sind derzeit im Master verfügbar, aber sie sind nicht dokumentiert und unterliegen Änderungen, da wir sicherstellen wollen, dass die Dinge klar bleiben. Kontexte werden wahrscheinlich immer höchstens eine optionale, erweiterte Funktion sein. –

+0

Das ist großartig. Ich bin sicher, dass es innerhalb des Rahmens nützlich ist und in einigen seltsamen Anwendungsfällen. –

Verwandte Themen