Question

我正在尝试创建一个询问用户是个人还是组织的模式，然后显示特定于该类型用户的注册模式。这是我到目前为止所拥有的：

父母：

this.state = {
   showInd: false,
   showOrg: false,  
};

changeInd = () => {
    this.setState({
       showInd: !this.state.showInd
     });
     this.props.onClose(); //this closes the initial modal
}
//exact same syntax for changeOrg

render(){

   return( 
     <div onClick={this.changeInd}>
          <FontAwesomeIcon icon={faUser} className="fa-7x icon"/> 
          <span>individual</span>
     </div>
     <div onClick={this.changeOrg}>
         <FontAwesomeIcon icon={faUsers} className="fa-7x icon"/>
         <span>organization</span>
    </div>
    <SignUpInd show={this.state.showInd} />
    <SignUpOrg show={this.state.showOrg} />
)}

和孩子：

render(){
   if (this.props.show){
   return( 
      <various sign up html>
   )}

}

当状态更改时，父组件将重新渲染，而子组件则不会更改，即使道具正在更改。我已经尝试过使用componentDidUpdate，但是当这里的道具改变时，也永远不会触发。

我做错了什么？

编辑：因此我意识到，如果我用回调函数注释掉关闭初始模式的那一行，那么signUpInd模式将正确呈现。为什么我不能两者都做？

Answer 1

1。在父组件上使用一个更改状态的函数。

state = {
    showInd: false,
    showOrg: false,  
 };

 stateChange = () =>{
   this.setState({showInd:!this.state.showInd})
 }

2。在div上使用onClick函数，它会给出与当前值相反的值，并将其作为道具传递给下一个组件

      <div onClick={this.stateChange}> //this onClick just flips showInd to the opposite of what it is currently - that's working properly
          
           <span>individual</span>
      </div>
     <SignUpInd show={this.state.showInd} stateChange= {this.stateChange} />

3。在另一端，只需接收道具并将其记录下来

        const {show,stateChange} = this.props
        console.log(show);

Answer 2

这有效：

Clip

道具变更时不重新渲染组件

2 个答案: