如何在不使用箭头函数的情况下将方法从一个组件传递到另一个组件？答案

【问题标题】：How to pass method from one component to another without using Arrow Function?如何在不使用箭头函数的情况下将方法从一个组件传递到另一个组件？
【发布时间】：2021-03-08 22:42:27
【问题描述】：

在下面的代码 sn-p 中，我必须将方法“handleChange”传递给另一个组件“TodoList”。我试过绑定方法，但没有解决问题。

import React from "react";
import TodoList from "./TodoItem";
import "./TodoStyles.css";
import {list} from "./TodoList"

class TodoApp extends React.Component   {
    constructor(){
        super();
        this.state = {
            todos : list
        }

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

    handleChange(id){
        console.log("Changed",id);
    }

    render(){

        const todoArr = this.state.todos.map(
            function(i){
                return <TodoList key = {i.id} arr = {i} handleChange = {this.handleChange}/>
            }
        );

        return( 
            <div className = 'todo-list'>
                {todoArr}
            </div>
        )
    }
    
}

export default TodoApp

但是使用箭头函数而不是常规函数，它解决了这个问题。

const todoArr = this.state.todos.map(
            (i) => {
                return <TodoList key = {i.id} arr = {i} handleChange = {this.handleChange}/>
            }
        );

Error Message

我的问题是，我们可以使用常规函数将函数“handleChange”传递给其他组件吗？

我在 ES6 中工作并在过去 1 周内做出反应，我试图在网上搜索解决方案，但没有找到任何可以解决我的问题的方法。所以，请温柔一点。

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

我不知道为什么你不能使用箭头函数。它们已在all browsers for years 中得到支持——如果你真的需要支持像 IE 这样的东西，像 Babel（你可以很容易地配置像 Webpack 这样的打包器来使用）这样的工具可以自动将你的代码转换为 ES5。

但是，如果你真的不能，你可以使用旧的“词法 this”技巧，箭头函数被设计为替代：

    const self = this;
    const todoArr = this.state.todos.map(
        function(i){
            return <TodoList key = {i.id} arr = {i} handleChange = {self.handleChange}/>
        }
    );

请注意，构造函数中的this.handleChange = this.handleChange.bind(this) 在这里没有直接帮助。（尽管您仍然需要使用上面的代码来使其工作。）它通常被使用，因此您可以将this.handleChange 作为事件处理程序传递并让它使用正确的this - 这里，map 中的函数已经使用自己的this，因此将this.handleChange 放在事件处理程序中不会引用正确的内容，即使您绑定也是如此。

【讨论】：

谢谢@Robin。它解决了这个问题。其实我在网上看了很多意见，也被建议尽量避免使用箭头函数，所以我选择了替代方案。

【解决方案2】：

Array.prototype.map() 采用第二个参数来设置 this 在映射函数中所指的内容，因此将其作为第二个参数传递以保留当前上下文。 [*]

你可以试试这个：

const todoArr = this.state.todos.map(
    function(i){
       return <TodoList key = {i.id} arr = {i} handleChange = {this.handleChange}/>
    }, this
);

[*]https://stackoverflow.com/a/30148997/1927991

【讨论】：

谢谢@codemonkey。这也解决了这个问题。