第一：一个简单的解决方案是为 map 函数内的内容创建一个组件，并将值作为 props 传递，当您从子组件调用该函数时，您可以将值传递给作为 props 传递的函数。

家长

deleteTodo = (val) => {
    console.log(val)
}
todos.map(el => 
    <MyComponent val={el} onClick={this.deleteTodo}/> 

)

我的组件

class MyComponent extends React.Component {
    deleteTodo = () => {
        this.props.onClick(this.props.val);
    }
    render() {
       return <div  onClick={this.deleteTodo}> {this.props.val} </div>
    }
}

示例片段

class Parent extends React.Component {
     _deleteTodo = (val) => {
        console.log(val)
    }
    render() {
        var todos = ['a', 'b', 'c'];
        return (
           <div>{todos.map(el => 
             <MyComponent key={el} val={el} onClick={this._deleteTodo}/> 
        
           )}</div>
        )
    }
    
   
}

class MyComponent extends React.Component {
        _deleteTodo = () => {
                     console.log('here');   this.props.onClick(this.props.val);
        }
        render() {
           return <div onClick={this._deleteTodo}> {this.props.val} </div>
        }
    }
    
ReactDOM.render(<Parent/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

编辑：

第二：另一种方法是使用 memoize 并返回一个函数

constructor() {
    super();
    this._deleteTodoListener = _.memoize(
                   this._deleteTodo, (element) => {
                        return element.hashCode();
                    }
              )
}

_deleteTodo = (element) => {
   //delete handling here
}

并使用它

todos.map(el => <div key={el} onClick={this._deleteTodoListener(el)}> {el} </div>)

PS 然而，这不是最好的解决方案，仍然会导致创建多个函数，但仍然比最初的情况有所改进。

第三：然而，更合适的解决方案是attribute在最上面的 div添加一个并从eventlike 中获取值

_deleteTodo = (e) => {
     console.log(e.currentTarget.getAttribute('data-value'));

 }

 todos.map(el => <div key={el} data-value={el} onClick={this._deleteTodo}> {el} </div>)

但是，在这种情况下，使用 toString 方法将属性转换为字符串，因此 and object 将转换为[Object Object]and 和数组，["1" , "2", "3"]如"1, 2, 3"

如何避免这种在渲染方法中绑定的方式或者有什么替代方法？

如果您关心重新渲染shouldComponentUpdate并且PureComponent是您的朋友，他们将帮助您优化渲染。

您必须从“父”中提取“子”组件并始终传递相同的props并实现shouldComponentUpdate或使用PureComponent. 我们想要的是当我们移除一个孩子时，其他孩子不应该被重新渲染。

例子

import React, { Component, PureComponent } from 'react';
import { render } from 'react-dom';

class Product extends PureComponent {
  render() {
    const { id, name, onDelete } = this.props;

    console.log(`<Product id=${id} /> render()`);
    return (
      <li>
        {id} - {name}
        <button onClick={() => onDelete(id)}>Delete</button>
      </li>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      products: [
        { id: 1, name: 'Foo' },
        { id: 2, name: 'Bar' },
      ],
    };

    this.handleDelete = this.handleDelete.bind(this);
  }

  handleDelete(productId) {
    this.setState(prevState => ({
      products: prevState.products.filter(product => product.id !== productId),
    }));
  }

  render() {
    console.log(`<App /> render()`);
    return (
      <div>
        <h1>Products</h1>
        <ul>
          {
            this.state.products.map(product => (
              <Product 
                key={product.id}
                onDelete={this.handleDelete}
                {...product}
              />
            ))
          }
        </ul>
      </div>
    ); 
  }
}

render(<App />, document.getElementById('root'));

演示：https : //codesandbox.io/s/99nZGlyZ

预期行为

• <App /> render()
• <Product id=1... render()
• <Product id=2... render()

当我们删除时<Product id=2 ...只<App />重新渲染。

• 使成为（）

要在演示中查看这些消息，请打开开发工具控制台。

在François Zaninotto 的文章：React is Slow，React is Fast：Optimizing React Apps in Practice 中使用和描述了相同的技术。

文档鼓励使用数据属性并从内部访问它们evt.target.dataset：

_deleteTodo = (evt) => {
  const elementToDelete = evt.target.dataset.el;
  this.setState(prevState => ({
    todos: prevState.todos.filter(el => el !== elementToDelete)
  }))
}

// and from render:

todos.map(
  el => <div key={el} data-el={el} onClick={this._deleteTodo}> {el} </div>
)

另请注意，这仅在您遇到性能问题时才有意义：

可以在渲染方法中使用箭头函数吗？

一般来说，是的，是可以的，而且通常是给回调函数传递参数最简单的方式。

如果您确实有性能问题，请务必进行优化！

这个答案https://stackoverflow.com/a/45053753/2808062绝对是详尽无遗的，但我想说与过度的重新渲染作斗争而不是仅仅重新创建微小的回调会给您带来更多的性能改进。这通常是通过shouldComponentUpdate在子组件中实现一个正确的来实现的。

即使 props 完全相同，下面的代码仍然会重新渲染孩子，除非他们自己阻止它shouldComponentUpdate（他们可能从 继承它PureComponent）：

handleChildClick = itemId => {}

render() {
    return this.props.array.map(itemData => <Child onClick={this.handleChildClick} data={itemData})
}

证明：https : //jsfiddle.net/69z2wepo/92281/。

因此，为了避免重新渲染，子组件shouldComponentUpdate无论如何都必须实现。现在，唯一合理的实现是完全忽略onClick它是否发生了变化：

shouldComponentUpdate(nextProps) {
    return this.props.array !== nextProps.array;
}