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函数，并且不为正确的组件设置状态。

如果你正在使用具有第二阶段预设或更低阶段的Babel，你可以使用语法绑定this：

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

是的，这是一个箭头功能定义，但直接在class内。它将bind正确的this引用，因此可以传递它，并且在调用时它将具有正确的引用。

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

如果您想了解更多信息，this Medium post涵盖了另外两种绑定方式，并解释了所有5个选项。

Answer 2

你可以通过以下代码来实现，

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

状态改变时不会重新渲染

2 个答案: