Question

在react类组件中，如果使用const / let来声明箭头函数，或者它们应该是emmited：

  class ReactComp extend Component {
      const sayHello = () => {
          return 'Hello';
      }
      sayBye = () => {
          return 'Hello';
      }
      render() {
          <div>
            {this.sayHello}
            {this.sayBye}
          </div>
      }
  }

在这个例子中，sayBye是否正确声明？（没有const）

另外，为什么在课外，这样的声明不起作用？

  class ReactComp extend Component {

      render() {
          <div>
            {sayHello}
            {sayBye}
          </div>
      }
  }
  const sayHello = () => {
      return 'Hello';
  }
  sayBye = () => {
      return 'Hello';
  }

这将返回一个异常：未捕获的ReferenceError：sayBye未定义

非常感谢！

Answer 1

答案是“这取决于”......你的两个例子做了很多不同的事情。在我给你一个更详细的答案之前，让我们看一下。

const

上面的代码可能会抛出语法错误，因为sayHello()（在此上下文中）不是有效的装饰器。即使它有效（或者你只是省略它），ReactComp也会成为sayHello类的一个方法（即一个实例方法）。每次创建此组件的新实例时，它都会有一个名为const example = <ReactComp />; example.sayHello(); // oversimplified example的内部方法。

class ReactComp extend Component {
    render() {
        <div>
          {sayHello}
          {sayBye}
        </div>
    }
}
const sayHello = () => {
    return 'Hello';
}
sayBye = () => {
    return 'Hello';
}

有意义吗？转到下一个示例：

sayHello()

暂时忽略您之前提到的语法错误，此代码创建了两个全局（ish）函数：sayBye()和sayHello(); // I can run this line of code anywhere! // no need for "const example = <ReactComp /> because sayHello() was defined outside of that class，它们（取决于您的其他代码）可以由任何其他函数全局访问组件或脚本。

const

我的观点：类上的实例方法与在组件外声明的函数不同。

在React类中声明箭头函数时应该使用const吗？

如果您正在创建实例方法，那么否您不需要const。如果您要在组件外部创建通用（即实用程序）功能，那么是您可能应该使用Report。

Answer 2

您无法使用类中的任何声明性语句定义变量。

它希望将属性名称附加到您班级的此上下文。

定义以下类：

class C extends Component {
 sayGoodBye = () => console.log("Bye!")
 sayHello = who => console.log("Hello " + who)

 render() {
   this.sayGoodBye()
   this.sayHello('world')
   // ...
 }
}

可翻译为：

const C = {
  sayGoodBye : () => console.log('bye!'),
  sayHello : who => console.log('Hello ' + who),
  render : () => {
    C.sayGoodBye()
    C.sayHello('world')
  } 
}

如果您尝试使用 const / let / var 在类中定义变量，则会导致错误。

在React类中声明箭头函数时应该使用const吗？

2 个答案: