javascript - 如何在 React/JSX 中手动创建的数组中设置键？

Question

我正在构建一个基于几种不同状态的工具栏。一切工作正常，我只能按下所需的(当时)按钮，一切都很顺利。

因为它是一个数组，React 希望每个元素都有其宝贵的键。然而，在每个推送点手动设置它们似乎不太灵活，因为当我添加更多项目时，我需要手动更新。

我尝试了一个简单的 map 创建后(请参阅 _.map 行)，但是 item.key 是只读的。

有没有办法根据数组索引或类似的方式自动分配键？

var toolbar = null;
if(!this.state.loading) {
    toolbar = [];
    if(this.state.conditionOne) {
        toolbar.push(<a onClick={this.toggleOne}>Close Section One</a>);
    } else {
        toolbar.push(<a onClick={this.toggleOne}>Show Section One</a>);
    }
    if(this.state.conditionTwo) {
        toolbar.push((
            <div>
                <a onClick={this.otherAction}>Other Action</a>
                <a onClick={this.toggleTwo}>Close Section Two</a>
            </div>
        );
    } else {
        toolbar.push(<a onClick={this.toggleTwo}>Show Section Two</a>);
    }

    _.map(toolbar, (item, i) => { item.key = i; });
}

// Later
return (
    Stuff and things
    {toolbar}
);

Answer 1

我相信你现在已经找到了一个好方法。正如昨天评论中所写，根据按钮的行为手动分配按键可能不会那么糟糕。

但是，如果它们太多(或者只是为了将 key 的创建保留在一个明确定义的位置)，您可以集中计算。我设置了一个小Codepen来说明一下。

class App extends React.Component { 
  // (1) Helper method
  applyMenuItemProps(label) {
    return {
      label: label,
      key: _.snakeCase(_.escape(label))
    };
  }

  render() {
    // (2) Stateless component
    const MenuItem = (props) => <li><a href="#">{ props.label }</a></li>;

    // (3) Using the Spread operator to apply the properties
    let menuItems = [
      <MenuItem {...this.applyMenuItemProps("Hello World")} />,
      <MenuItem {...this.applyMenuItemProps("Ham and Eggs")} />
    ];

    return (
      <div>
        <p><strong>Render with keys</strong></p>
        { menuItems }
      </div>
    );
  }
}

(1)是一个返回标签和计算出的键的辅助方法。在本例中，我使用 Lodash/Underscore 的 snakeCase和escape根据标签计算字符串(当然，只有在同一数组中不存在具有相同标签的两个项目时，这才有效)。

(2)使用 React 的 stateless components (docs) ，我开始非常喜欢。如果它们应该是可重用的，那么它们可以进入一个单独的模块，但我喜欢它们的原因之一是它们不一定需要单独的文件，因此样板文件可以最小化。

(3)使用 Javascript 的 Spread 运算符 (ES2015) 来应用 applyMenuItemProps() 返回的对象的属性作为 <MenuItem/> 上的属性元素。

Codepen 还具有 onClick应用了处理程序。我将其留在这里，因为它与集中 key 计算没有太大关系。希望它对您有所帮助，并且您喜欢使用 React。 :)