親コンポーネントのコールバックに引数を渡す正しい方法は、

Question

です。反応が非常に大きいアプリケーションを初めて作成した後は、私の再レンダリングが基本的に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

Answer 1

各レンダリングで作成されている機能を停止するには、クラスメソッドとしてそれらを定義し、渡すことができます各IDを小道具として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> 
    ) 
    } 
} 

私はあなたの質問を正しく解釈することを願っています！