React组件问题咨询：多按钮触发同一组件及多状态设置实现

问题所在 #

• 你用单个布尔值showInfo同时控制三个子组件的显示，不管点击哪个按钮都会把这个值设为true，导致三个子组件的open条件同时满足，所以会一起显示。
• 当前state结构不符合任务要求，没有区分info、success、failed三种状态，仅用了单一布尔值。

修复方案 #

把state改成能标识当前显示消息类型的结构：用null表示无消息显示，用'info'/'success'/'failed'对应三种消息状态。每个按钮点击时设置对应状态值，子组件通过判断当前状态是否匹配自身类型来控制显示。

修改后的父组件代码 #

import { useState } from 'react';
import { Stack, Button } from '@mui/material';
import { InfoMessage } from './InfoMessage';
import { SuccessMessage } from './SuccessMessage';
import { ErrorMessage } from './ErrorMessage';

export const Messages = () => {
  // 用联合类型定义state，完全匹配任务要求的三个状态值
  const [activeMessage, setActiveMessage] = useState<null | 'info' | 'success' | 'failed'>(null);

  return (
    <Stack>
      <Button onClick={() => setActiveMessage('info')}>
        open info message
      </Button>
      <InfoMessage 
        open={activeMessage === 'info'} 
        onClose={() => setActiveMessage(null)} 
      />

      <Button onClick={() => setActiveMessage('success')}>
        open success message
      </Button>
      <SuccessMessage 
        open={activeMessage === 'success'} 
        onClose={() => setActiveMessage(null)} 
      />

      <Button onClick={() => setActiveMessage('failed')}>
        open error message
      </Button>
      <ErrorMessage 
        open={activeMessage === 'failed'} 
        onClose={() => setActiveMessage(null)} 
      />
    </Stack>
  );
};

说明 #

• activeMessage的取值完全覆盖任务要求的info、success、failed三个状态，null用于标识无消息显示的初始状态。
• 每个子组件的open属性通过判断当前状态是否匹配自身类型来决定是否显示，点击按钮只会触发对应组件的显示。
• 子组件代码无需修改，原有的open和onCloseprops逻辑完全适配新的state结构。

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