问

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

琦琦蔡外_734 发布于 2023-01-17 09:58

key

我知道组件的动态子项必须具有以下唯一key(来自官方文档的修改示例):

render: function() {
  var results = this.props.results;
  return (
    {results.map(function(result) {
      return ;
    })}
  );
}



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

render: function() {
  var results = this.props.results;
  return (
    
       
    
  );
}


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



        
        2 个回答
        
                        
                虽然第一个答案是正确的,但这被认为是一种不好的做法,因为:


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


更好的方法: 

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


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

        

                
                    2023-01-17 10:00  回答
                       手机用户2602909197
                
            

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

        
                
                    2023-01-17 10:01  回答
                       
                
            
                    

    

    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签