状态隐藏显示组件，在状态没有值

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 /> }