Question

众所周知，this.someFunction = this.someFunction.bind(this)可以在React类组件中使用。但是，有时为非常简单的组件创建类很麻烦。因此，如何在不创建类的情况下将函数绑定到this？

Answer 1

Answer 2

this在类component中是有意义的，因为它引用了component实例。在功能组件中没有意义，因为它是undefined还是全局变量，取决于环境和函数的声明方式。

对于类组件，如果不需要显式构造函数，则可以省略，class fields可用于分配实例属性，包括绑定方法：

class Foo extends Component {
  foo = this.foo.bind(this);

  foo() { ... }
  ...
}

哪种语法糖适用于：

class Foo extends Component {

  constructor(props) {
    super(props);
    this.foo = this.foo.bind(this);
  }

  foo() { ... }
  ...
}

绑定的原型方法比实例箭头方法具有several benefits。

Answer 3

是的箭头功能是解决方案。

与此绑定

this.someFunction = this.someFunction.bind(this)

使用箭头功能，

someFunction = () => {
   // do something
}

Answer 4

如果使用箭头功能，则无需绑定“ this”。它具有简单干净的语法。

someFuncton = () => {
    // whatever write here...
}

Answer 5

在React 16.8中，您可以将hooks用于有状态组件，从本质上讲，您可以将所有内容都编写为函数，而无需使用类和它们附带的所有警告（std::function<void(double)> decorated = DurationAssertDecorator(1s, 5);， this等。

用法示例

这是在函数内部使用useState() hook和useEffect() hook以及箭头函数（已绑定到组件上下文）的示例：

.bind()

简短说明

您使用import React, { useState, useEffect } from 'react'; function LimitedTextarea({ rows, cols, value, limit }) { const [content, setContent] = useState(value); const setFormattedContent = text => { text.length > limit ? setContent(text.slice(0, limit)) : setContent(text); }; useEffect(() => { setFormattedContent(content); }, []); return ( <div> <textarea rows={rows} cols={cols} onChange={event => setFormattedContent(event.target.value)} value={content} /> <p> {content.length}/{limit} </p> </div> ); }创建一个状态变量useState()，并使用一种方法来更新该变量content。
您创建箭头功能setContent()，以通过setFormattedContent方法更新content状态变量，该方法已绑定到上下文。
您使用setContent来调用useEffect()状态变量的值的setFormattedContent。
最后，您将在类组件的content方法中返回任何内容。

如何在没有构造函数的情况下将React组件的功能绑定到“ this”？

5 个答案:

用法示例

简短说明