Question

我知道某个组件的dynamic children必须具有唯一的key，如下所示（来自官方文档的修改示例）：

render: function() {
  var results = this.props.results;
  return (
    {results.map(function(result) {
      return <ChildComponent type="text" key={result.id} changeCallback={this.props.callbackFn}/>;
    })}
  );
}

考虑到ChildComponent是另一个嵌套在这里的React组件，render方法如下所示

render: function() {
  var results = this.props.results;
  return (
    <div className="something">
       <input type="text" onChange={this.props.changeCallback} />
    </div>
  );
}

在调用callbackFn(event)时有没有办法访问密钥？

Answer 1

虽然第一个答案是正确的，但这被认为是一种不好的做法，因为：

JSX prop中的绑定调用或箭头函数将在每个渲染上创建一个全新的函数。这对性能不利，因为它会导致垃圾收集器的调用方式超出必要的范围。

更好的方式：

{string str = "hi"; cout << str;}

来源：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Answer 2

使用JavaScript的本机bind部分应用函数回调。 React的“Communicate Between Components”doc：

中提到了这一点

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

Answer 3

我们可以通过 Data Attributes

访问数据

// ChildComponent.js
render: function() {
  var results = this.props.results;
  return (
    <div className="something">
       <input 
          type="text" 
          onChange={this.props.changeCallback} 
          data-key={this.props.key} // "key" was passed as props to <ChildComponent .../>
       />
    </div>
  );
}

现在；在您的 changeCallback 方法中；您可以访问此data：

// ParentComponent.js
(evt) => {
  console.log(evt.target.dataset.key);
}

祝你好运...

React：在事件时检索动态子键

3 个答案:

我们可以通过 Data Attributes