使用 reactstratp 库自动隐藏 Toast 消息

Posted 2023-03-23

【中文标题】使用 reactstratp 库自动隐藏 Toast 消息

【英文标题】：Autohide Toast message using reactstratp library

【发布时间】：2021-03-25 07:59:47

【问题描述】：

我已经尝试了所有方法，但我的吐司仍然没有自行消失，这是组件

interface Props 
  setGlobalToast?: typeof setGlobalToast;
  toast?: ToastRequest;

/**
 * Displays toast notifications to user on any page of the site.
 */
const ToastGlobal: FunctionComponent<Props> = ( setGlobalToast, toast ) => 
  return (
    <Toast className="GlobalToast" isOpen=!!toast transition=key:"1", transitionLeaveTimeout:3000>
      <ToastHeader icon=toast && toast!.type toggle=() => setGlobalToast!(null)>
        toast && toast.heading
      </ToastHeader>
      <ToastBody>toast && toast.body</ToastBody>
    </Toast>
  );
;

【参考方案1】：

试试这个

<Toast className="GlobalToast" show=!!toast transition=key:"1", transitionLeaveTimeout:3000 onClose=()=>setGlobalToast(!toast) delay=2000 autohide>
      <ToastHeader icon=toast && toast!.type>
        toast && toast.heading
      </ToastHeader>
      <ToastBody>toast && toast.body</ToastBody>
</Toast>
      

【讨论】：

非常感谢您的回复，由于 reactstrap 库我与 react bootstrap 不同，因此我仍然无法在属性中使用 isOpen，onClose 不存在，延迟或自动隐藏也不存在 /跨度>

【参考方案2】：

function SampleToast()
    const [visible, setVisible] =  useState(true)
    const handleClick = () => 
         setVisible(true)
         setTimeOut( () => setVisible(false), 1000)
    
    return(
        <React.Fragment>
            <Button onClick = () => handleClick()> Show </Button>
            <Toast isOpen = visible transition =  in: visible, timeout: 150>
               Hello world
            </Toast>
        </React.Fragment>
    )

【参考方案3】：

useEffect(() => 
    if (toast) 
      setTimeout(() => toggle(), 3000)
    
  , [toast])

只需将切换功能替换为您的功能即可关闭吐司。