如何在React中将map回调的箭头函数改写为普通函数

你给出的代码里的item => <TodoItem .../>是单行隐式返回的箭头函数，转换为普通函数时需要注意两点：基础语法转换、React场景下的this指向兼容，具体改写方式如下：

方案1：bind绑定this（推荐） #

直接给普通函数绑定外层作用域的this，和原箭头函数的this指向完全一致：

function render() {
  const todoItems = this.state.todos.map(
    function(item) {
      // 原箭头函数是隐式返回，普通函数需要手动加return关键字
      return <TodoItem
        key={item.id}
        item={item}
        handleChange={this.handleChange}
      />
    }.bind(this) // 绑定render函数的this（组件实例）到普通函数内部
  );
}

方案2：外层缓存this引用 #

如果不想用bind，也可以在外层提前保存this的引用，普通函数内部直接调用缓存的变量即可：

function render() {
  // 提前缓存组件实例的this
  const self = this;
  const todoItems = this.state.todos.map(
    function(item) {
      return <TodoItem
        key={item.id}
        item={item}
        handleChange={self.handleChange}
      />
    }
  );
}

内容的提问来源于stack exchange，提问作者beniboy