警报不适用于 React Hooks & Bootstrap

Question

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

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.

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.

Answer 1

在 React 中是否显示警报之类的东西通常是 状态驱动的 ，所以在这种情况下你可能有一个 showAlert 布尔状态值并设置当您想显示警报时，将其设置为 true。然后，只需在返回的 JSX 中有条件地呈现警报内容。请参阅下面的示例，了解其工作原理。

function MyComponent() {
    const [showAlert, setShowAlert] = useState(false);

    const submitNominations = () => {
        setShowAlert(true);
    }

    return (
        <React.Fragment>
            {showAlert && (
                <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>
            )}
            <div id="nomination-div">
                Your Nominations
                {generateNominationCards()}
                <Button
                    variant="primary" onClick={() => submitNominations()}>
                    Submit Nominations
                </Button>
            </div>
        </React.Fragment>
    );
}

警报不适用于 React Hooks & Bootstrap

Alert not working with React Hooks & Bootstrap

javascript

reactjs

bootstrap-4

alerts