React类组件使用class切换两个div显隐的加载与点击异常问题求解

问题原因 #

• render代码中两个div未书写闭合标签，导致DOM结构解析异常，样式规则无法正确匹配生效，是初始加载时两个div同时显示的核心原因
• 在React组件的JSX中同时使用了className和原生class属性，属性冲突会导致最终生成的DOM节点类名不符合预期
• flipScreen方法中连续调用两次setState，虽然React会批量处理，但更推荐合并为单次调用减少不必要的渲染
• 需确认全局CSS中.hidden类是否正确定义了display: none !important;样式，避免优先级低于其他类导致隐藏不生效

修复方案 #

1. 合并state更新逻辑 #

flipScreen(){
  this.setState({
    hideDashBoard: true,
    hideContractScreen: false
  });
}

如果需要实现点击反复切换两个div显隐，可以把逻辑改成：

flipScreen(){
  this.setState(prevState => ({
    hideDashBoard: !prevState.hideDashBoard,
    hideContractScreen: !prevState.hideContractScreen
  }));
}

2. 修正JSX结构 #

移除多余的原生class属性，补全div闭合标签，使用模板字符串拼接类名：

{/* 合约面板：hideContractScreen为true时隐藏 */}
<div 
  className={`${this.state.hideContractScreen ? 'hidden' : ''} row`} 
  style={{position:"absolute",left:"250px",top:"50px"}}
>
  {/* 合约面板业务内容 */}
</div>

{/* 仪表盘面板：hideDashBoard为true时隐藏 */}
<div 
  className={`${this.state.hideDashBoard ? 'hidden' : 'show'} row`} 
  style={{position:"absolute",left:"250px",top:"50px"}}
>  
  <span onClick={this.flipScreen} className="startProposal">
    Start Proposal
  </span>
  {/* 仪表盘面板业务内容 */}
</div>

3. 确认全局CSS规则 #

.hidden {
  display: none !important;
}
.show {
  display: block;
}

内容的提问来源于stack exchange，提问作者Abhishek