Question

在第一次编写了一个非常大的应用程序后，我发现我的重新渲染基本上冻结了对用户体验非常糟糕的用户界面。

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

所以目前我有一个名为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>
    );
}

问题

我如何获得相同的开发者体验但不会遭受重新渲染问题？

相关文章

Answer 1

要停止在每个渲染上创建的函数，可以将它们定义为类方法，并将ID作为props传递给每个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>
    )
  }
}

我希望我正确地解释你的问题！

正确的方法将参数传递给反应中的父组件回调

1 个答案: