React多图标点击文本联动问题：实现单图标对应文本独立显示

你当前的问题核心是用了单个全局布尔状态showText控制所有文本的显示，所有图标按钮点击都会切换这个状态，自然会导致所有关联文本同步显示/隐藏。以下是两种可行的解决方案：

方案1：封装独立组件（推荐） #

把每个图标+文本组合成独立的IconTextToggle组件，每个组件自己管理显示状态，彻底隔离状态，代码更干净易维护，也符合React组件化思想。

// 封装独立的切换组件
const IconTextToggle = ({ IconComponent, text }) => {
  const [showText, setShowText] = useState(false);
  
  const toggleText = () => setShowText(prev => !prev);
  
  return (
    <div className="inline-flex justify-center items-center">
      <Button className="border-none bg-white" onClick={toggleText}>
        <IconComponent size={30} stroke={1} />
      </Button>
      {showText && (
        <Text className="inline-flex justify-center items-center align-text-top">
          {text}
        </Text>
      )}
    </div>
  );
};

// 父组件中直接复用
const YourParentComponent = () => {
  return (
    <div>
      <IconTextToggle IconComponent={IconUsers} text="devenir member" />
      <IconTextToggle IconComponent={IconHeart} text="favorites" />
      <IconTextToggle IconComponent={IconMail} text="notification" />
      <IconTextToggle IconComponent={IconMathSymbols} text="total" />
    </div>
  );
};

方案2：父组件跟踪激活标识 #

如果不想拆分组件，可以在父组件用状态记录当前激活的图标标识，点击时切换这个标识，只有匹配标识的文本才会显示。

const YourComponent = () => {
  // 初始为null表示无激活项，激活时存入对应标识
  const [activeKey, setActiveKey] = useState(null);

  const toggleText = (key) => {
    // 点击已激活的项则取消激活，否则设置为当前项
    setActiveKey(prev => prev === key ? null : key);
  };

  return (
    <div>
      <div className="inline-flex justify-center items-center">
        <Button className="border-none bg-white" onClick={() => toggleText("member")}>
          <IconUsers size={30} stroke={1} />
        </Button>
        {activeKey === "member" && (
          <Text className="inline-flex justify-center items-center align-text-top">
            devenir member
          </Text>
        )}
      </div>
      <div className="inline-flex justify-center items-center">
        <Button className="border-none bg-white" onClick={() => toggleText("favorites")}>
          <IconHeart size={30} stroke={1} />
        </Button>
        {activeKey === "favorites" && (
          <Text className="flex justify-center items-center align-text-top">
            favorites
          </Text>
        )}
      </div>
      <div className="inline-flex justify-center items-center">
        <Button className="border-none bg-white" onClick={() => toggleText("notification")}>
          <IconMail size={30} stroke={1} />
        </Button>
        {activeKey === "notification" && (
          <Text className="flex justify-center items-center align-text-top">
            notification
          </Text>
        )}
      </div>
      <div className="inline-flex justify-center items-center">
        <Button className="border-none bg-white" onClick={() => toggleText("total")}>
          <IconMathSymbols size={30} stroke={1} />
        </Button>
        {activeKey === "total" && (
          <Text className="flex justify-center items-center align-text-top">
            total
          </Text>
        )}
      </div>
    </div>
  );
};

两种方案都能实现点击单个图标仅显示对应文本的需求，优先推荐方案1，后续修改或新增同类组件时更高效。

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