再レンダリング状態が

Question

を変更したときに、私は次のコンポーネントを持って発生していない...

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     register: false 
    } 

    } 
    handleClick(event) 
    { 
     console.log("link was clicked"); 
     this.setState({register: true}); 

    } 

    render(){ 


     return (

      <If condition={ this.state.register }> 
       <Then><Register /></Then> 
       <Else>{() => 
        <Index event={this.handleClick} /> 

       }</Else> 
      </If> 
     ); 
    } 
} 

module.exports = App; 

がだから私の機能​​が呼び出され、これはtrueに状態を変更します。ただし、<IF>ステートメントは、状態が変更されたことに気付かず、同じままです（インデックスのみが残ります）

リンクがクリックされるたびに<Register />をレンダリングする必要があります。したがって、リンクをクリックすると、状態がtrueに変わり、IF文がこの変更をキャッチして正しいコンポーネントをレンダリングします。

どうすればいいですか？状態の変化を通知するには、IFステートメントを取得するにはどうすればよいですか？

Answer 1

<Index>は何であるかわからないeventで何をしているのかわからない。渡された関数を単にprops.eventとして呼び出すと、​​関数は、間違ったthis参照で呼び出され、正しいコンポーネントの状態は設定されません。あなたはステージ2のプリセット以下でバベルを使用している場合

、あなたはthisをバインドするための構文を使用できます。

class App ... { 
    ... 
    handleClick = (event) => { ... } 
    ... 
} 

はい、それは矢印関数definitonだが、直接内部class。それはbindの正しいの参照になりますので、渡すことができ、呼び出されたときにこの参照が適切になります。

また、event={this.handleClick.bind(this)}のように、関数を渡すときにbindを直接使用することもできます。しかし、これは呼び出されるたびに新しい関数を作成するので、非常に頻繁に呼び出されるとパフォーマンスに影響を与える可能性があることに注意してください。この方法は使用しないでください。airbnbのeslint設定はこれをエラーとしてマークします。より良いアプローチは、コンストラクタ内部で1回のバインディングを行うことです。this.handleClick= this.handleClick.bind(this)です。

さらに詳しく知りたい場合は、this Medium postは2つのバインド方法と5つのオプションすべてを説明しています。

Answer 2

あなたは、次のコードでそれを行うことができます

return (
     { this.state.register ? <Register /> : <Index event={this.handleClick.bind(this)} /> } 
    );