reactjs - React：将键控子级发送到组件。键始终为空

Question

我在将键控元素发送到子元素时遇到问题，该子元素将按键过滤这些子元素。这个想法是通过键将处理程序映射到子项，处理程序将切换键以进行过滤。我知道使用索引作为键是一种反模式，但是这里发生了什么？我总是得到错误"Warning: Each child in an array or iterator should have a unique "key" prop.

render: function() { return ( <Frame> <Frame> <Navbar isLoggedIn={true} handlers={this.handlers}> {this.props.children.map(function(child, i) { return ( <button onClick={this.handlers[i]}>{child.props.text || 'Checkout item ' + i}</button> ) }.bind(this))} </Navbar> </Frame> {this.props.isLoading ? <Loading /> : <Filter filter={function(child) { return String(this.props.displayed) === child.key; }.bind(this)}> {this.props.children.map(function(child, i) { return (<div key={i}><child /></div>) })} </Filter>} </Frame> ) }

function Filter (props) { return ( <div> {Array.isArray(props) ? props.children.filter(function(child) { return props.filter(child); }) : props.children} </div> ) };

Answer 1

您需要将一个键传递给任何被迭代的 DOM 元素。你在<button>.

<Navbar isLoggedIn={true} handlers={this.handlers}>
  {this.props.children.map(function(child, i) {
    return (
      <button key={i} onClick={this.handlers[i]}>{child.props.text || 'Checkout item ' + i}</button>
    )
  }.bind(this))}
</Navbar>