Javascript 警报不使用React挂钩和；独自创立

我正在建立一个项目，人们可以提名他们最喜欢的电影。我也在尝试 单击“提交”按钮提交所有提名时显示警报

return (

        <React.Fragment>

            <div id="nomination-div">

                Your Nominations

                {generateNominationCards()}

                <Button
                    variant="primary" onClick={() => submitNominations()}>
                    Submit Nominations
                </Button>

            </div>

        </React.Fragment>
    );
    ```

Here is the code I have for my ```submitNominations()``` button.

返回(
你的提名
{generateNominationCards（）}
submitNominations（）}>
提交提名
);
```
这是我的``submitNominations（）``按钮的代码。

函数submitNominations（）{
返回(
嘿，很高兴见到你

哦，是的，你成功地阅读了这条重要的警告信息。下面是一个例子
文本将运行更长一点，以便您可以看到
alert适用于此类内容。



当你需要的时候，一定要使用保证金工具来保持良好的状态
而且整洁。

)
}

我使用此链接作为指南：https://react-bootstrap.github.io/components/alerts/
我已经在一个单独的文件中定义了react引导组件，如下所示
const Jumbotron=ReactBootstrap.Jumbotron；
const Badge=ReactBootstrap.Badge；
const Alert=ReactBootstrap.Alert；
const Carousel=ReactBootstrap.Carousel；
我现在什么都没有出现或发生。

在React中显示的类似于警报的内容通常是由状态驱动的，因此在这种情况下，您可能会有一个

showAlert

布尔状态值，并在希望显示警报时将其设置为

true

。然后，在返回的JSX中有条件地呈现警报内容。请参见下面的示例，了解这可能的工作方式

函数MyComponent（）{
const[showAlert，setShowAlert]=useState（false）；
const submitNominations=（）=>{
设置ShowAlert（真）；
}
返回(
{showarter&&(
嘿，很高兴见到你

哦，是的，您成功地阅读了这条重要的警报消息。此示例文本将运行更长的时间，以便您可以看到警报中的间距如何与此类内容一起工作。



当你需要的时候，一定要使用边距工具来保持事物的整洁。

)}
你的提名
{generateNominationCards（）}
submitNominations（）}>
提交提名
);
}

function submitNominations(){

    return(
        <Alert variant="success">
        <Alert.Heading>Hey, nice to see you</Alert.Heading>
        <p>
            Aww yeah, you successfully read this important alert message. This example
            text is going to run a bit longer so that you can see how spacing within an
            alert works with this kind of content.
        </p>
        <hr />
        <p className="mb-0">
            Whenever you need to, be sure to use margin utilities to keep things nice
            and tidy.
        </p>
        </Alert>
    )
}

I'm using this link as my guide: https://react-bootstrap.github.io/components/alerts/

I have <Alerts> defined in a separate file with the rest of my react-bootstrap components like so 

    const Jumbotron = ReactBootstrap.Jumbotron;
    const Badge = ReactBootstrap.Badge;
    const Alert = ReactBootstrap.Alert;
    const Carousel = ReactBootstrap.Carousel;


Nothing is currently showing up or happening for me at all.