Question

class UserList extends Component {

    constructor(props) {
        super(props);
        this.something => (
               console.log('something')
            )
    }

    createListItem(){
        return this.props.users.map(user => 
            <li key={user.id}>{user.first} {user.last}</li>)
    }

    render(){
        return(
            <ul>
                {this.createListItem()}
            </ul>
            <button onClick={this.something}>trigger something</button>
        )
    }
}

如果我在构造函数中删除<button>和this.something函数，代码将起作用。下面的代码出了什么问题？实际上我不需要构造函数，但我想调查何时使用bind(this)以及何时不使用ES6来编写React。

Answer 1

您实际上并没有指定有效的函数表达式，所以让我们从那开始。

首先，如果您不接受任何参数，箭头函数的正确语法是：

() => { console.log('something'); }

好的，现在已经排序了，你需要使用赋值运算符实际分配它：

this.something = () => { console.log('something'); }

太好了，现在应该让构造函数工作了。让我们看一下你实际使用函数的位置：

<button onClick={this.something}>trigger something</button>

所以，从历史上看，在ES2015之前，确实这样的事情意味着回调不会绑定到实例，除非你使用表达式this.something.bind(this)或者在construtor中分配它就像你试图做。

但是如果你想使用箭头函数，他们真正方便的是编写匿名函数，所以你可以直接用简单的用例做这样的事情：

<button onClick={() => this.foo()}>trigger something</button>

如果没有，我建议您不要在构造函数中使用匿名函数或作为回调的表达式，而是为它编写一个方法并使用the new :: bind operator与Babel，特别是自动绑定行为。

然后你会得到这样的东西：

class UserList extends Component {
  createListItem () {
    return this.props.users.map(user => (
      <li key={user.id}>{user.first} {user.last}</li>
    ))
  }

  something () {
    this.setState({foo: 'bar'})
    console.log('something')
  }

  render(){
    return(
      <ul>{this.createListItem()}</ul>
      <button onClick={::this.something}>trigger something</button>
    )
  }
}

这既简洁又可以避免编写无用的构造函数。

对此感到困惑并且绑定（this）反应写入es6

1 个答案: