Ü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}>&uarr;</button>
          <button id="down" className="btn btn-sm btn-primary" onClick={this.voteDown}>&darr;</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 über this.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 vermeiden key 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 von key zu id mir erlaubt zu gehen, dass prop zusammen.
  • Oh, mit der Objekt-Eigenschaft key ist völlig in Ordnung. Der prop key ist besonderes zu Reagieren. So <FeedItem key={item.id} /> hilft Reagieren mit Abstimmung der Komponenten. Aber die konkrete Instanz von FeedItem hat nicht wirklich Zugriff auf den Wert key, 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 und id ist für die Komponente.
InformationsquelleAutor camerow | 2015-05-26
Schreibe einen Kommentar