Javascript 状态更改时不会重新渲染

我有以下组件

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;

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
注册号码：false
}
}
handleClick（事件）
{
log（“链接被点击”）；
this.setState（{register:true}）；
}
render（）{
返回(
{() => 
}
);  
}
}
module.exports=App；

因此，每当单击链接时，都会调用我的函数

handleClick

，这会将状态更改为true。但是，

语句没有注意到状态已更改，因此保持不变（只保留索引）

我想要的是每当单击链接时都呈现

。因此，如果单击链接，状态将更改为true，然后if语句将捕获此更改并呈现正确的组件

我该怎么做？如何让

IF

语句注意到状态的变化？

不确定

是什么，或者它对

事件做了什么。如果它只是调用作为
props.event
传递的函数，则调用
handleClick
函数时使用了错误的
此
引用，并且没有设置正确组件的状态

如果您将Babel与stage-2预设或更低版本一起使用，则可以使用语法绑定此

：

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

是的，它是一个箭头函数定义，但直接在

类中。它将
绑定
正确的
此
引用，以便可以传递它，并且在调用时具有正确的此引用

或者，在传递函数时可以直接使用
bind
，如
event={this.handleClick.bind（this）}
。但请注意，这会在每次调用时创建一个新函数，因此如果经常调用它，可能会影响性能。建议您不要使用此方法，airbnb的eslint配置会将此标记为错误。更好的方法是在构造函数内部进行一次性绑定，如
this.handleClick=this.handleClick.bind（this）

如果您希望了解更多信息，请介绍另外两种绑定方法，并解释所有5种选项
 您可以通过以下代码来完成此操作

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

返回(
{this.state.register？：}
);