Übergeben von Schlüsseln an untergeordnete Elemente in React.js

8

Ich laufe durch ein reaktives Tutorial auf Tutsplus, das ein bisschen alt ist, und der Code funktioniert nicht so, wie er ursprünglich geschrieben wurde. Ich bin damit völlig einverstanden, da es mich zwingt, selbstständiger zu lernen, aber ich habe eine Weile mit einem Fehler verbracht, den ich einfach nicht verstehen kann. Der Fehler besteht darin, dass ich keinen Objektschlüssel weitergeben kann, was verhindert, dass mein Programm den Status des korrekten Objekts aktualisiert.

Zunächst ist das Repo, wenn Sie diesen Code ausführen und in Aktion sehen möchten: Ссылка

Ich habe eine Kindkomponente, die so aussieht:

%Vor%

Wenn nun jemand die Abstimmungsschaltfläche drückt, ist das gewünschte Verhalten für die Methode FeedItem.vote (), ein Objekt an die Hauptkomponente Feed zu senden:

%Vor%

Welcher Schlüssel sollte über die onVote-Funktion der Elternkomponente weitergegeben werden:

%Vor%

Meine Logik beruht darauf, die Schlüssel in der onVote-Funktion abgleichen zu können, jedoch wird die Schlüsselreproduktion nicht korrekt weitergegeben. Meine Frage ist also, wie gebe ich ihnen den Schlüssel durch diese "Einbahnstraße" zu meiner Mutterkomponente weiter?

Hinweis: Zögern Sie nicht, auf andere Probleme oder bessere Design-Entscheidungen oder absolute Dummheiten hinzuweisen. Oder sogar, dass ich die falsche Frage stelle.

Ich freue mich auf eine schöne Erkundung dieses coolen Rahmens.

    
camerow 26.05.2015, 17:59
quelle

1 Antwort

31

Der Property key hat in React eine besondere Bedeutung . Es wird nicht an die Komponente als Property übergeben, sondern wird von React verwendet, um den Abgleich von Sammlungen zu unterstützen. Wenn Sie d3 wissen, funktioniert es ähnlich wie die Schlüsselfunktion für selection.data() . Dadurch kann React die Elemente des vorherigen Baums mit den Elementen des nächsten Baums verknüpfen.

Es ist gut, dass Sie eine key haben (und Sie brauchen eine, wenn Sie ein Array von Elementen übergeben), aber wenn Sie diesen Wert an die Komponente weitergeben möchten, sollten Sie eine weitere Prop:

verwenden %Vor%

(und Zugriff auf this.props.id in der Komponente).

    
Felix Kling 26.05.2015, 18:35
quelle

Tags und Links