狀態隱藏顯示組件，在狀態沒有值

Question

我想隱藏和顯示組件取決於在我的選擇列表中選擇的值。

林我的根app.js我：

logChange(val) { 
     console.log("Selected: " + val); 
     this.setState({ active: val }); 
    } 


    render() { 

    let options = [ 
     { value: 'Apprentice', label: 'Apprentice' }, 
     { value: 'Assessor', label: 'Assessor' }, 
     { value: 'Assessment Centre', label: 'Assessment Centre' } 
    ]; 

    return (
     <div className="container"> 

      <User showDiv={this.logChange} /> 

      { 
      this.state.active = "Apprentice" 
      ? <Apprentice /> 
      : null 
      } 

       { 
      this.state.active = "Assessor" 
      ? <Assessor /> 
      : null 
      } 

      { 
      this.state.active = "Assessment Centre" 
      ? <AssessmentCenter /> 
      : null 
      } 



     </div> 

user.js的組件：

logChange(userType) { 
    this.props.showDiv(userType.value); 
} 

我怎樣才能檢查狀態和渲染相應的組元？

我沒有看到在狀態的值：

Answer 1

試試這個：

{ this.state.active === "Apprentice" && <Apprentice /> } 

{ this.state.active === "Assessor" && <Assessor /> } 

{ this.state.active === "Assessment Centre" && <AssessmentCenter /> }