재 렌더링 상태가 나는 다음과 같은 구성 요소가

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; 

가 그래서 내 기능 handleClick가 호출이 true로 상태를 변경합니다. 그러나 <IF> 문은 상태가 변경된 것을 알지 못하므로 그대로 유지됩니다 (인덱스 만 남아 있음)

링크를 클릭 할 때마다 <Register />을 렌더링하고 싶습니다. 따라서 링크를 클릭하면 상태가 true로 변경되고 IF 문은이 변경 사항을 포착하여 올바른 구성 요소를 렌더링합니다.

어떻게하면됩니까? 상태 변경을 알리기 위해 IF 문을 어떻게 얻을 수 있습니까?

Answer 1

무엇이 <Index>인지 또는 event으로 무엇을하고 있는지 확실하지 않습니다. 전달 된 함수를 props.event으로 호출하면 handleClick 함수가 잘못된 this 참조와 함께 호출되고 올바른 구성 요소의 상태가 설정되지 않습니다. 당신이 무대 2 미리 이하로 바벨을 사용하는 경우

, 당신은 this 바인딩 구문을 사용할 수 있습니다 :

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

예, 그것은 화살표 기능 definiton하지만 직접 내부 class. bind은 올바른 this 참조이므로 전달 될 수 있으며 호출 될 때이 참조를 적절하게 갖습니다.

또는 event={this.handleClick.bind(this)}과 같이 함수를 전달할 때 bind을 직접 사용할 수 있습니다. 그러나 호출 될 때마다 새로운 함수가 생성되므로 매우 자주 호출되는 경우 성능에 영향을 미칠 수 있습니다. 이 접근 방식을 사용하지 말고 airbnb의 eslint config는 이것을 오류로 표시합니다. 더 나은 접근 방법은 생성자 내부에서 한 번 바인딩하는 것입니다 (this.handleClick= this.handleClick.bind(this)).

자세히 알고 싶으면 this Medium post은 2 가지 방법으로 바인딩하고 5 가지 옵션을 모두 설명합니다.

Answer 2

당신은 다음 코드에 의해 그것을 할 수

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