javascript - 在React中将参数传递给父组件回调的正确方法

在第一次使用react编写了一个相当大的应用程序之后，我遇到了一个问题，即我的重新渲染基本上冻结了UI，这对于UX来说太糟糕了。

我不知道每次传递匿名函数作为道具都会导致整个接收组件。因此，现在我正试图修复我的功能，但发现很难正确。

因此，目前我有一个名为NavBar的组件，该组件具有名为NavBarLink的子组件。每个NavBarLink调用相同的showPopup(arg)函数。但是，showPopup(arg)的参数基于单击哪个NavBarLink。

例

render() {
    return (
        <NavBarLink onClick={() => showPopup("UNIQUE_POPUP_ID")}>Link 1</NavBarLink>
        <NavBarLink onClick={() => showPopup("ANOTHER_POPUP_ID")}>Link 2</NavBarLink>
    );
}

题

如何获得相同的开发人员经验，但又不遭受重新渲染问题的困扰？

相关文章


Why Arrow Functions and bind in React’s Render are Problematic
React Pattern: Extract Child Components to Avoid Binding
React Binding Patterns: 5 Approaches for Handling this

最佳答案

要停止在每个渲染器上创建函数，可以将它们定义为类方法，并将ID作为道具传递给每个NavBarLink

class MyComponent {
  handleClick = (id) => {
    return showPopup(id)
  }

  render () {
    return (
      <div>
        <NavBarLink onClick={this.handleClick} id='UNIQUE_POPUP_ID'>Link 1</NavBarLink>
        <NavBarLink onClick={this.handleClick} id='ANOTHER_POPUP_ID'>Link 2</NavBarLink>
      </div>
    )
  }
}

然后在您的NavBarLink类中，添加另一个方法来调用具有在props中传递的ID的处理程序。

class NavBarLink {
  handleClick = () => {
    this.props.onClick(this.props.id)
  }

  render () {
    return (
      <a onClick={this.handleClick}>...</a>
    )
  }
}

希望我能正确解释您的问题！