状态隐藏显示组件,在状态没有值
问题描述:
我想隐藏和显示组件取决于在我的选择列表中选择的值。状态隐藏显示组件,在状态没有值
林我的根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);
}
我怎样才能检查状态和渲染相应的组元?
答
试试这个:
{ this.state.active === "Apprentice" && <Apprentice /> }
{ this.state.active === "Assessor" && <Assessor /> }
{ this.state.active === "Assessment Centre" && <AssessmentCenter /> }
你的所有三元的运营商正在使用'='的比较时,你应该做的'== '或'===' –
我没有看到你绑定了logChange函数 –