哪种方法是在React中编写Event的更优雅的方法？

Question

编写代码时，我总是想找到一种更优雅的方法。更好的可读性和更好的效率。您更喜欢哪种方法？或者您还有其他更好的方法。

方法1

在我看来，这是一个丑陋的方法，混合代码。

class Layer extends Component {
  render(){
    return (
      <li
        onClick={(event)=>{
          console.log(event.target, this.props.layerId);
          // Some Code
        }}
      >
        {layerName}
      </li>
    )
  }
}

---

方法2

常用方法。但是每次点击都会创建一个匿名函数。效率？

class Layer extends Component {
  onLayerClick(event){
    console.log(event.target, this.props.layerId);
    // Some Code
  }

  render(){
    return (
      <li
        onClick={(event)=>{
          this.onLayerClick(event);
        }}
      >
        {layerName}
      </li>
    )
  }
}

---

方法3

我最喜欢的方法。但是需要绑定。

class Layer extends Component {
  onLayerClick(event){
    console.log(event.target, this.props.layerId);
    // Some Code
  }

  render(){
    return (
      <li
        onClick={this.onLayerClick.bind(this)}
      >
        {layerName}
      </li>
    )
  }
}

Answer 1

非常有见地和基于上下文，但是通过属性初始化的箭头函数可以做到这一点，因此您不必在render方法或构造函数中report = ss.Reports.get_report(report_id,page_size=5000,) row_dict={} count = 0 for row in report.rows: row_dict[count] = (row.sheet_id, row.id) count +=1 。

bind

但是，class properties尚未使用该语言，因此并非所有开发环境都可以访问它们。我认为第二好的选择是在构造函数中class Layer extends Component { onLayerClick = (event) => { console.log(event.target, this.props.layerId); }; render(){ return <li onClick={this.onLayerClick}>{layerName}</li>; } } 。比类属性选项要写的要多，但是您不必每次都在render方法中创建一个新函数。

bind

Answer 2

我更喜欢这样：

class Example extends Component {

  handleClick = (e) => {
      console.log("EVENT:, e") 

  }
  
  render()  {
     return (
       <div>
         <button 
           onClick={this.handleClick}
          >
            Click Me!
          </button>
      )
    }
}

它自动绑定到组件的this，imho看起来更干净

Answer 3

我在代码中使用了两个版本，具体取决于状态的要求（即当我使用非功能组件时）。

功能：

export default functional MyComponent({ layerName, layerId }) {
  return (
    <li onClick={onLayerClick}>{layerName}</li>
  )

  function onLayerClick(e) {
    console.log(e.currentTarget, layerId)
  }
}

不起作用：

export default class MyComponent extends Component {

  render() {
    return (
      <li onClick={this.onLayerClick}>{this.props.layerName}</li>
    )
  }

  onLayerClick = e => {
    console.log(e.currentTarget, this.props.layerId)
  }
}

请注意，第二个（非功能性）版本使用的是class properties，该版本当前处于第3阶段。