在 React.js 中将密钥传递给 children

Question

我正在运行浏览关于 tutsplus 的 React 教程，该教程有点旧，并且代码无法像最初编写的那样工作。实际上，我完全同意这一点，因为它迫使我更加独立地学习，但是我花了一段时间来解决一个我无法弄清楚的错误。该错误包括无法传递 objects 密钥，这会阻止我的程序更新正确 object 的状态。

如果您想运行这段代码并查看它的实际效果，这里首先是 repo：https://github.com/camerow/react-voteit

我有一个 child 组件，如下所示：

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>
    );
  }

});

现在，当有人点击投票按钮时，所需的行为是 FeedItem.vote() 方法将 object 发送到主要 Feed 组件：

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>
    );
  }

});

应该通过 parent 组件的 onVote 函数传递该键：

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>
    );
  }

});

我的逻辑依赖于能够协调 onVote 函数中的键，但是键道具没有被正确传递。所以我的问题是，如何通过这个 'one way flow' 将他们的密钥传递给我的 parent 组件？

注意：请随时指出其他问题或更好的设计决策，或绝对的愚蠢。甚至我问错了问题。

期待对这个酷炫框架的精彩探索。

Answer 1

The key prop has a special meaning in React. It is not passed to the component as a prop, but is used by React to aid the reconciliation of collections. If you know d3，它的作用类似于selection.data()的关键功能。它允许 React 将前一棵树的元素与下一棵树的元素相关联。

你有一个 key 很好（如果你传递一个元素数组，你需要一个），但是如果你想将该值传递给组件，你应该另一个属性：

<FeedItem key={item.key} id={item.key} ... />

（并在组件内部访问 this.props.id）。

在 React.js 中将密钥传递给 children

Passing keys to children in React.js

javascript

properties

reactjs