当作为 props 传递时，箭头函数未定义

Question

when event handler functions are sent as props to child components. normal functions are being received, but not fat arrow functions.

import React, { Component } from "react";

export default class FruitClass extends Component {
  bananaEvents = {
    color: this.changeColor,
    taste: this.getTaste
  };
  getTaste = () => {
    console.log("sweet");
  };
  changeColor() {
    console.log("Yellow");
  }
  render() {
    return (
      <div>
        <Banana {...this.bananaEvents} />
      </div>
    );
  }
}

function Banana(props) {
  console.log("props from FruitClass", props); // {taste: undefined, color: ƒ}
  return (
    <div>
      <button onClick={props.color}>click me</button>
    </div>
  );
}

console.log("props from FruitClass", props); // {taste: undefined , color: ƒ}

why arrow function, is not received as a function in child component ? how to receive arrow functions as proper functions in child, when sent as props like this?

Answer 1

Non-arrow functions are still hoisted in classes. If you move bananaEvents after defining the arrow functions your class will work normally.

I tested this just now with

class Test {
    vars = { one: this.firstFunction(), two: this.secondFunction() }
    firstFunction() { return 1
    }
    secondFunction = () => 2
}
const test1 = new Test(); // will give an error function undefined

and

class Test2 {
    firstFunction() { return 1
    }
    secondFunction = () => 2

    vars = { one: this.firstFunction(), two: this.secondFunction() }
}
const test2 = new Test2(); // works normally

Answer 2

It is because you are defining getTaste and changeColor differently:

• getTaste is defined as a property referencing an arrow function
• changeColor is defined as function on the class

Functions live on the prototype of the class, properties live on the instance.

So when the bananaEvents property is initialised on an instance of the class, the property getTaste does not exist yet, hence this.getTaste === undefined .

Define getTaste as a function instead of a property:

bananaEvents = {
  color: this.changeColor,
  taste: this.getTaste
};
getTaste() {
  console.log("sweet");
};
changeColor() {
  console.log("Yellow");
}