javascript React：在事件发生时检索动态子键
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23448937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React: Retrieve dynamic child key upon event
提问by Yan Foto
I am aware that dynamic childrenof a component must have a unique keyas the following (modified example from official docs):
我知道组件的动态子级必须具有key如下唯一性（官方文档中的修改示例）：
render: function() {
var results = this.props.results;
return (
{results.map(function(result) {
return <ChildComponent type="text" key={result.id} changeCallback={this.props.callbackFn}/>;
})}
);
}
Considering that ChildComponentis another React component nested here, with a rendermethod as bellow
考虑到这ChildComponent是另一个嵌套在这里的 React 组件，其render方法如下
render: function() {
var results = this.props.results;
return (
<div className="something">
<input type="text" onChange={this.props.changeCallback} />
</div>
);
}
is there any way to access the key when callbackFn(event)is called?
有什么方法可以在callbackFn(event)被调用时访问密钥？
采纳答案by Ross Allen
Partially apply the function callback by using JavaScript's native bind. This is mentioned in React's "Communicate Between Components" doc:
通过使用 JavaScript 的原生bind. React 的“组件间通信”文档中提到了这一点：
callbackFn: function(key) {
// key is "result.id"
this.props.callbackFn(key);
},
render: function() {
var results = this.props.results;
return (
<div>
{results.map(function(result) {
return (
<ChildComponent type="text" key={result.id}
changeCallback={this.callbackFn.bind(this, result.id)} />
);
}, this)}
</div>
);
}
回答by barczag
Although the first answer is correct this is considered as a bad practice since:
尽管第一个答案是正确的，但这被认为是一种不好的做法，因为：
A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary.
JSX 道具中的绑定调用或箭头函数将在每次渲染时创建一个全新的函数。这对性能不利，因为它会导致垃圾收集器被调用的方式超出必要的范围。
Better way:
更好的方法：
var List = React.createClass({
handleClick (id) {
console.log('yaaay the item key was: ', id)
}
render() {
return (
<ul>
{this.props.items.map(item =>
<ListItem key={item.id} item={item} onItemClick={this.handleClick} />
)}
</ul>
);
}
});
var ListItem = React.createClass({
render() {
return (
<li onClick={this._onClick}>
...
</li>
);
},
_onClick() {
this.props.onItemClick(this.props.item.id);
}
});
Source: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
来源：https: //github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
