标签: bootstrap-toast

我正在尝试使用Bootstrap 4.2 Toast。我希望 Toasts 显示在我网站右侧部分的右上角。

我尝试了以下标记，因为它在文档的 boostrap 示例中显示，但我无法让它显示出来。

<!-- Toasts -->
<div aria-live="polite" aria-atomic="true" style="position: relative;">

    <!-- Position it -->
    <div style="position: absolute; top: 3rem; right: 0;">
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="mr-auto">Toast Title</strong>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                Some Toast Body      
            </div>
       </div>

    </div>
</div>

这是一个带有我完整标记的小提琴手，但似乎无法显示祝酒词。

我怎样才能显示吐司

按照以下方法在 React.js 中单击按钮即可动态显示Bootstrap 5 Toast

导入声明：

import * as bootstrap from 'bootstrap';

按钮单击提交处理程序：

let toastEl = document.getElementById('myToast');
let toast = new bootstrap.Toast(toastEl, {autohide: false});
toast.show();

使成为：

<div class="toast align-items-center" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

<button type="button" className="btn btn-primary" id="showToast" onClick={this.showToast}>Show Toast</button>

是否有任何替代方法可以以 React 方式执行此操作，因为不建议在 React 中使用 document.getElementById ？尝试使用 Ref，但 Toast 不显示。