使用 React、Next.JS 和 React-Bootstrap

所以，我只是在寻找一种将数据发送到 Alert react 组件的方法，这样我就可以只使用一个代码块，并将其重新用于各种不同的警报需求，而不仅仅是一个段落或用例或任何东西。

现在，作为序言，我不确定这是不是我可以在 React 和 React-Bootstrap 领域内做的事情，但这似乎是一种非常 React 的做事方式，我有点卡住了完全诚实。我还在一起学习整个生态系统，所以我问你是否可以原谅我，如果这是业余的或简单的！

让我解释一下我以前是怎么做的

所以，回到纯 HTML 和 JS，我可以简单地

<div id="myAlert" class="alert">
            <div class="alert-content">
                <div class="alert-header">
                    <h2>Alert</h2>
                </div>
                <div class="alert-body">
                    <p id="alertMessage"></p>
                    <button id="okBtnAlert" class="alertBtn" style="margin-bottom: 1em;">OK</button>
                </div>
            </div>
        </div>

坐在我的 index.html 的顶部，在我的 main.js 中我可以

function showPopup(newMessage,functionToDo) {
    var OKBtn = document.getElementById("okBtn");
    var CancelBtn = document.getElementById("cancelBtn");
    var pop = document.getElementById("myPopup");

    document.getElementById('popupMessage').innerHTML = newMessage;

    pop.style.display = "block";

    OKBtn.onclick = function() {
        pop.style.display = "none";
        eval(functionToDo);
    }

    CancelBtn.onclick = function() {
        pop.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == pop) {
            pop.style.display = "none";
        }
    }
}

有了这个，我可以随时调用 showPopup 方法，我想向我的用户显示一个弹出窗口以通知他们无效信息，或者就他们正在执行的操作向他们发出警告，并且能够使用自定义内部 html信息，并提供一个方法，如果用户确认发生了什么。

所以，这是我在 React-Bootstrap 中尝试做的

首先，我创建了自己的组件

import {Alert} from 'react-bootstrap'

const Alert = (onClose,alertHeading,alertText,alertVariant,methodToExecute) => {
    return (
        <Alert variant={alertVariant} onClose={onClose} dismissible>
            <Alert.Heading>{alertHeading}</Alert.Heading>
            <p>{alertText}</p>   
            <Button variant={alertVariant} onclick={methodToExecute}></Button>
        </Alert>
    )
}

export default Alert

我认为这是正确的做法。所以，我基本上用更友好的 React 语法替换了我的 HTML 和 Javascript。

我遇到的问题是在哪里我应该在什么地方实现它？

我尝试的第一件事是返回我的 index.js，就在我希望它出现的主屏幕上。

所以我试着把它放进去

{show ? <Alert/> : ''} 

这适用于显示警报，但是我对如何动态更改它有点不知所措。

我的想法是将 {alerts} 放在我的返回中，并有一个包含页面动态绘制的警报对象的列表，但是，当我这样做时，我的警报只会在出现某种情况时显示“页面刷新”，由于某种原因，它们在添加时不会被动态添加。

那你怎么看？我绝对可以像那样尝试实现我自己的 div，但我认为尝试将它与组件一起使用到 React 中，并且使用引导程序组件似乎是最好的方法。提前感谢您的任何帮助！

编辑：我进一步尝试取消“myAlert”类的想法，而只是将 {alerts.length > 0 ? <Alerts alerts={alerts} /> : ''} 放在那里，但是，这并没有产生很好的结果。我在这里创建了一个辅助函数

const pushAlert = (onClosing,methodToExecute,buttonText) => {
        alerts.push({
            "onClosing": onClosing,"alertHeading": alertHeading,"alertText": alertText,"alertVariant": alertVariant,"methodToExecute": methodToExecute,"buttonText": buttonText
        })
}

创建一个对象，然后我可以将其发送到组件并从中拉出。但是这种作品，开合还是不行，而且不是动态的，只是硬刷新才显示。