キー付き要素を子要素に送信すると、それらの子要素がキーでフィルタリングされます。キーによってハンドラーを子にマップするという考え方で、ハンドラーはキーを切り替えてフィルターを適用します。インデックスをキーとして使用することはアンチパターンであることは知っていますが、ここで何が起こっているのでしょうか? 私はいつもエラーが発生します"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>
)
};