Question

当事件处理函数作为道具发送给子组件时。正常功能正在接收，但不显示粗箭头功能。

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（“ FruitClass的道具”，props）; // {口味：未定义，颜色：ƒ}

为什么箭头功能未在子组件中作为功能接收？当像这样的道具发送时，如何接收箭头功能作为儿童的正常功能？

Answer 1

非箭头函数仍在类中悬挂。如果在定义箭头功能后移动了bananaEvents，您的类将正常工作。

我刚刚用

进行了测试

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

和

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

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

Answer 2

这是因为您对getTaste和changeColor的定义不同：

getTaste被定义为引用箭头函数的属性
changeColor被定义为类上的函数

函数位于类的原型上，属性位于实例上。

因此，在类的实例上初始化bananaEvents属性时，属性getTaste尚不存在，因此this.getTaste === undefined。

将getTaste定义为函数而不是属性：

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

作为道具传递时，箭头函数未定义

2 个答案: