javascript - 当我需要传递参数时，JSX Props 中没有 .bind() 或箭头函数对我来说毫无意义

Question

查看 eslint 规则，No .bind() or Arrow Functions in JSX Props .

它说不要使用箭头函数或绑定(bind):

<div onClick={this._handleClick.bind(this)}></div>
<div onClick={() => console.log('Hello!'))}></div>

而是使用:

<div onClick={this._handleClick}></div>

一切都很好，但我如何在点击事件上将参数传递给此函数？

这是我的原始代码示例:

export class UserList extends Component {
  constructor(props) {
    super(props);
    this.handleToggleActive = this.handleToggleActive.bind(this);
  }
  handleToggleActive() {
    console.log(arguments);
  }
  render() {
    return (
      <ul className="user-list">
        {this
          .props
          .users
          .map(user => (
            <li key={user.id}>
              <Link to={`/users/${user.id}`}>{user.name}</Link>
              <Button onClick={this.handleToggleActive}>Toggle Active</Button>
            </li>
          ))}
      </ul>
    );
  }
}

如何将 user.id 获取到我的 handleToggleActive 函数？当我尝试类似的东西时:

<Button onClick={this.handleToggleActive(user.id)}>Toggle Active</Button>

它在渲染时执行，我能看到的唯一其他方法是使用箭头函数？

正确的做法是什么？

Answer 1

无论是使用 bind 还是 arrow 函数，都会创建一个新函数，将一个全新的 prop 传递给您的组件，导致不必要的重新渲染和垃圾收集器的额外工作，使用数据属性是一个糟糕的设计，不是 React 的方式做事情，你不应该直接访问 DOM，而是让 React 处理事情。取而代之的是，您可以只创建一个新组件并将处理程序作为 Prop 传递，在组件的方法中处理 id 的“绑定(bind)”:

class User extends Component {
  handleClick() {
    this.props.handleToggleActive(this.props.user.id);
  }

  render() {
    return (
       <li>
         <Link to={`/users/${this.props.user.id}`}>{this.props.user.name}</Link>
         <Button onClick={this.handleClick}>Toggle Active</Button>
      </li>
    )
  } 
}

export class UserList extends Component {
  constructor(props) {
    super(props);
    this.handleToggleActive = this.handleToggleActive.bind(this);
  }
  handleToggleActive(userId) {
    console.log(userId);
  }
  render() {
    return (
      <ul className="user-list">
        {this
          .props
          .users
          .map(user => (
            <User key={user.id} user={user} handleToggleActive={this.handleToggleActive} />
          ))}
      </ul>
    );
  }
}