Übergabe Schlüssel, um Kinder in React.js
Bin ich laufen durch ein reagieren tutorial auf tutsplus, dass ist ein bisschen alt, und der code funktioniert nicht, wie es ursprünglich geschrieben wurde. Ich bin eigentlich völlig ok mit diesem, wie es zwingt mich zu lernen, mehr unabhängig, aber ich habe eine Weile ein bug, dass ich einfach nicht herausfinden können. Der Fehler besteht nicht in der Lage zu gehen auf ein Objekte-Taste, die verhindert, dass mein Programm mit der Aktualisierung der Staat das richtige Objekt.
Ersten aus-hier ist das repo-wenn Sie möchten, führen Sie diesen code und sehen Sie es in Aktion: https://github.com/camerow/react-voteit
Ich habe eine Kind-Komponente, die wie folgt aussieht:
var FeedItem = React.createClass({
vote: function(newCount) {
console.log("Voting on: ", this.props, " which should have a key associated.");
this.props.onVote({
key: this.props.key,
title: this.props.title,
description: this.props.desc,
voteCount: newCount
});
},
voteUp: function() {
var count = parseInt(this.props.voteCount, 10);
var newCount = count + 1;
this.vote(newCount);
},
voteDown: function() {
var count = parseInt(this.props.voteCount, 10);
var newCount = count - 1;
this.vote(newCount);
},
render: function() {
var positiveNegativeClassName = this.props.voteCount >= 0 ?
'badge badge-success' :
'badge badge-danger';
return (
<li key={this.props.key} className="list-group-item">
<span className={positiveNegativeClassName}>{this.props.voteCount}</span>
<h4>{this.props.title}</h4>
<span>{this.props.desc}</span>
<span className="pull-right">
<button id="up" className="btn btn-sm btn-primary" onClick={this.voteUp}>↑</button>
<button id="down" className="btn btn-sm btn-primary" onClick={this.voteDown}>↓</button>
</span>
</li>
);
}
});
Nun, wenn jemand trifft, den vote button das gewünschte Verhalten für die FeedItem.Stimmen () - Methode ein Objekt senden, die bis zu den Haupt-Feed-Komponente:
var FeedList = React.createClass({
render: function() {
var feedItems = this.props.items;
return (
<div className="container">
<ul className="list-group">
{feedItems.map(function(item) {
return <FeedItem key={item.key}
title={item.title}
desc={item.description}
voteCount={item.voteCount}
onVote={this.props.onVote} />
}.bind(this))}
</ul>
</div>
);
}
});
Denen passieren soll, die Taste durch die übergeordnete Komponente onVote Funktion:
var Feed = React.createClass({
getInitialState: function () {
var FEED_ITEMS = [
{
key: 1,
title: 'JavaScript is fun',
description: 'Lexical scoping FTW',
voteCount: 34
}, {
key: 2,
title: 'Realtime data!',
description: 'Firebase is cool',
voteCount: 49
}, {
key: 3,
title: 'Coffee makes you awake',
description: 'Drink responsibly',
voteCount: 15
}
];
return {
items: FEED_ITEMS,
formDisplayed: false
}
},
onToggleForm: function () {
this.setState({
formDisplayed: !this.state.formDisplayed
});
},
onNewItem: function (newItem) {
var newItems = this.state.items.concat([newItem]);
//console.log("Creating these items: ", newItems);
this.setState({
items: newItems,
formDisplayed: false,
key: this.state.items.length
});
},
onVote: function (newItem) {
//console.log(item);
var items = _.uniq(this.state.items);
var index = _.findIndex(items, function (feedItems) {
//Not getting the correct index.
console.log("Does ", feedItems.key, " === ", newItem.key, "?");
return feedItems.key === newItem.key;
});
var oldObj = items[index];
var newItems = _.pull(items, oldObj);
var newItems = this.state.items.concat([newItem]);
//newItems.push(item);
this.setState({
items: newItems
});
},
render: function () {
return (
<div>
<div className="container">
<ShowAddButton displayed={this.state.formDisplayed} onToggleForm={this.onToggleForm}/>
</div>
<FeedForm displayed={this.state.formDisplayed} onNewItem={this.onNewItem}/>
<br />
<br />
<FeedList items={this.state.items} onVote={this.onVote}/>
</div>
);
}
});
Meine Logik setzt auf die Vereinbarkeit der Schlüssel in der onVote Funktion, aber der Clou ist nicht richtig weitergegeben. Meine Frage ist also, wie gebe ich Sie der Schlüssel durch das 'one-way-flow" zu meiner übergeordneten Komponente?
Hinweis: Fühlen Sie sich frei zu zeigen, andere Probleme oder besser die design-Entscheidung, oder absolute Dummheiten. Oder auch, dass ich die falsche Frage gestellt.
Freuen sich auf ein schönes exploration von diesem coolen Rahmen.
key
hat eine Besondere Bedeutung in Reagieren. Es ist nicht zur Verfügung gestellt, um die Komponente überthis.props.key
afaik. Sollten Sie einen anderen prop name für das. Oder, wenn Sie wirklich wollen, um den Wert als Schlüssel, fügen Sie eine zusätzliche Stütze mit der gleichen, was Sie können, greifen Sie dann innerhalb der Komponente. Siehe facebook.github.io/reagieren/docs/...- Ahh, ok, das hilft ungemein. Ich hatte gelesen, dass die Dokumentation schon, aber war ein wenig verwirrt durch es. Um zu klären, ist es ok für mich zu definieren, eine requisite
key
aber es sollte so Aussehen<FeedItem key={item.id} />
? Oder sollte ich vermeidenkey
insgesamt? - Noch immer diese Warnung
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of FeedList. See https://fb.me/react-warning-keys for more information.
, obwohl ändern Sie alle Instanzen vonkey
zuid
mir erlaubt zu gehen, dass prop zusammen. - Oh, mit der Objekt-Eigenschaft
key
ist völlig in Ordnung. Der propkey
ist besonderes zu Reagieren. So<FeedItem key={item.id} />
hilft Reagieren mit Abstimmung der Komponenten. Aber die konkrete Instanz vonFeedItem
hat nicht wirklich Zugriff auf den Wertkey
, und es sollte nicht haben, da es kein Interesse an ihm. Wenn Sie möchten, übergeben Sie die id der Komponente, so dass Sie darauf zugreifen können, wählen Sie einen anderen prop name. - Sie müssen
key
sowie:<FeedItem key={item.id} id={item.id} />
. Es mag redundant, aber Sie dienen unterschiedlichen Zwecken:key
ist für Reagieren undid
ist für die Komponente.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die
key
prop hat eine Besondere Bedeutung in Reagieren. Es ist nicht an die Komponente als Staffage, sondern wird von Reagieren zu Hilfe, um die Vereinbarkeit von Sammlungen. Wenn Sie wissen,d3, es funktioniert ähnlich wie die Funktion der Taste fürselection.data()
. Es ermöglicht Reagieren die Zuordnung der Elemente von der vorherigen Struktur, mit den Elementen der nächste Baum.Es ist gut, dass Sie eine
key
(und Sie müssen, wenn Sie übergeben Sie ein array von Elementen), aber wenn Sie möchten, übergeben diesen Wert an die Komponente, sollten Sie einen anderen prop:(und Zugang
this.props.id
innerhalb der Komponente).onVote
Funktion.