使用 reactstratp 库自动隐藏 Toast 消息答案

【问题标题】：Autohide Toast message using reactstratp library使用 reactstratp 库自动隐藏 Toast 消息
【发布时间】：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>
  );
};

【问题讨论】：

标签： reactjs typescript toast reactstrap

【解决方案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])

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

【讨论】：