React中使用hidden属性导致页面无限加载的问题求助

问题排查 #

你提供的代码逻辑本身不会直接触发无限重渲染，但结合你提到的hidden属性导致无限加载的情况，可能存在以下问题：

• 初始状态与标签激活样式不匹配：tabIndex初始值为0，但Tab2默认添加了tab-active类，视觉状态和实际state不一致易引发混淆。
• hidden属性的兼容性或样式冲突：部分浏览器对hidden属性的处理可能和自定义CSS冲突，比如CSS强制覆盖hidden的默认隐藏行为，会导致组件异常。

修复方案 #

方案1：统一初始状态与激活样式 #

让标签激活样式和tabIndex状态绑定，避免状态混乱：

import React, { useState } from "react";

const InventoryMain = () => {
  const [tabIndex, setTabIndex] = useState(0);
  return (
    <div>
      <div className="tabs">
        <span 
          onClick={()=> setTabIndex(0)} 
          className={`tab tab-lifted ${tabIndex === 0 ? 'tab-active' : ''}`}
        >Tab 1</span>
        <span 
          onClick={()=> setTabIndex(1)} 
          className={`tab tab-lifted ${tabIndex === 1 ? 'tab-active' : ''}`}
        >Tab 2</span>
      </div>
      <div className="tab-contents">
        <div className="tab-1" hidden={tabIndex !== 0}>Tab1 </div>
        <div className="tab-2" hidden={tabIndex !== 1}>Tab2</div>
      </div>
    </div>
  );
};

export default InventoryMain;

方案2：替换hidden为条件渲染（更推荐） #

React中更常用条件渲染控制组件显隐，能避免hidden属性的兼容性问题：

import React, { useState } from "react";

const InventoryMain = () => {
  const [tabIndex, setTabIndex] = useState(0);
  return (
    <div>
      <div className="tabs">
        <span 
          onClick={()=> setTabIndex(0)} 
          className={`tab tab-lifted ${tabIndex === 0 ? 'tab-active' : ''}`}
        >Tab 1</span>
        <span 
          onClick={()=> setTabIndex(1)} 
          className={`tab tab-lifted ${tabIndex === 1 ? 'tab-active' : ''}`}
        >Tab 2</span>
      </div>
      <div className="tab-contents">
        {tabIndex === 0 && <div className="tab-1">Tab1 </div>}
        {tabIndex === 1 && <div className="tab-2">Tab2</div>}
      </div>
    </div>
  );
};

export default InventoryMain;

方案3：检查CSS样式冲突 #

如果坚持使用hidden属性，排查自定义CSS中是否有强制覆盖hidden默认行为的代码，比如：

/* 此类代码会破坏hidden属性的隐藏效果，需删除或修改 */
[hidden] {
  display: block !important;
}

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