React中如何向处理器传对象？Semantic UI菜单代码疑问解析

1. 在React JS中如何向事件处理器传递对象？ #

在React里给事件处理器传递自定义对象，常用的有三种实用方式：

• 箭头函数包裹传递：绑定onClick时，用箭头函数直接把事件对象和自定义对象一起传给处理器，直观又灵活：

  <Menu.Item 
    name='home' 
    onClick={(e) => this.handleItemClick(e, { name: 'home', userId: 123 })} 
  />
  

• bind方法绑定参数：利用Function.prototype.bind预先绑定要传递的对象，注意参数顺序会排在事件对象前面：

  <Menu.Item 
    name='home' 
    onClick={this.handleItemClick.bind(this, { name: 'home', userId: 123 })} 
  />
  

  这时处理器要调整参数顺序，写成handleItemClick = (customObj, e) => { ... }来接收。
• 组件内置封装传递：像Semantic UI React这类成熟UI库的组件，会自动把自身props（比如name）打包成对象作为参数传递，这是组件内部做好的便捷功能，不用开发者手动传参。

2. 此代码中name属性是如何传递到handleItemClick处理器的？ #

这是Semantic UI React的Menu.Item组件内部封装的特性。

当你给Menu.Item设置name属性后，组件在监听原生点击事件时，会自动把组件的相关props（包括你设置的name）整理成一个对象，和原生事件对象e一起作为参数传递给你指定的onClick回调函数。

简单说，Menu.Item的内部逻辑会帮你完成这件事：用户点击时，它会调用onClick(e, { name: this.props.name })，所以你的handleItemClick函数里才能通过解构{ name }拿到这个值，完全不用你手动显式传递这个对象。

内容的提问来源于stack exchange，提问作者Chen