问我可以在reactjs中使用常规的引导吐司吗？

EN

您可以在React中使用所有普通的引导实用程序，但它不会重新出现。

这是因为为了启用交互功能，Bootstrap使用了JQuery和其他改变DOM的Javascript，后者并不总是能很好地处理React，后者喜欢“拥有”DOM和任何修改。

如果您查看Bootstrap Toasts (这里)的使用部分，您可以看到它的祝酒词需要使用Jquery/JS初始化：

通过JavaScript初始化祝酒词： $('.toast').toast(option)

这在React中可能会很混乱，有一些方法可以在useEffect()块中调用它，但是我过去在类似的事情上遇到过麻烦。

这就是为什么react引导是伟大的，它可以给你预先制作的所有这些功能的组件，你可以把它放到你的代码库中。

请参阅react用于祝酒的文档这里，可以添加功能齐全的祝酒词，只需：

<Toast>
  <Toast.Header>
     <strong className="mr-auto">Bootstrap</strong>
  </Toast.Header>
  <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>

这取决于您使用的Bootstrap的哪个版本。引导5不再使用jQuery，所以像Toast这样的引导组件可以不用像react-bootstrap或reactstrap这样的第三方库。

首先导入所需的组件..。

import { Toast } from 'bootstrap';

然后，根据需要实例化和使用.

const { Toast } = bootstrap;

var toastEl = document.getElementById('myToast');
const bsToast = new Toast(toastEl);
bsToast.show();

带反应的自举5烤面包