[英]React rendering based on boolean in state: ternary not working
React 开发工具向我显示 state 正在成功更改,但是正确的组件未呈现。
这是切换 state 的按钮内的三元组:
return (
<div>
<div>{questionBlocks}</div>
<button className="advanced-options" onClick={this.toggleAdvanced}>
{this.state.advancedText}
<span>
{this.showAdvanced ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</span>
</button>
</div>
);
这是 toggleAdvanced function(效果很好,因为我在切换 showAdvanced 时成功展示了新元素:
toggleAdvanced = (e) => {
e.preventDefault();
if (this.state.showAdvanced === true) {
this.setState((prevState) => ({
showAdvanced: !prevState.showAdvanced,
}));
} else {
this.setState((prevState) => ({
showAdvanced: !prevState.showAdvanced,
}));
}
};
问题可能就在这里
<span>
{this.showAdvanced ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</span>
您正在使用this.showAdvanced
但它应该是this.state.showAdvanced
您在三元组中缺少state
。 应该是this.state.showAdvanced
,而不是this.showAdvanced
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.