Question

我正在做一个TO-DO列表教程，但由于我写了这样的东西而失败了：

class TodoItems extends Component {
  createTasks(item) { // define it as a function
      // using “this” here breaks the app
      ...

   }
}

正确的方法是

class TodoItems extends Component {
    createTask = (item) => { // using a lambda 
       // using this here is ok
       ...
     }
}

示例源代码：https://github.com/therj/react-todo （具体是here）

为什么第一个this未定义？

我尝试使用节点解释器声明类，但提示从不返回

> class A {}
undefined
> class TodoItems /*extends Component*/ {
...     createTasks= (item) => {
.....         return (
.......             <li key={item.key} onClick={() => this.props.deleteItem(item.key)}>
.......                 {item.text}
.......
...             </li>
...         )
...     }
...
...     render() {
...         const todoEntries = this.props.entries
...         const listItems = todoEntries.map(this.createTasks)
...         return <ul className="theList">{listItems}</ul>
...     }
... }
...
...
>
(To exit, press ^C again or type .exit)

不确定这是否与反应有关，es6或其他原因。

Answer 1

在第二个示例中，您使用箭头功能，该功能从外部词法范围中提取this。这是在函数中获取this的方法之一-另一种方法是使用bind。您可以阅读更多详细信息，例如：https://hackernoon.com/demystifying-this-bind-in-react-87f1c843b8b7

函数声明与lambda（是否有反应？）

1 个答案: