Reactjs 在这个Alert React引导示例中，我遗漏了什么？

这一天来，我的头都被打得血淋淋的：两个容易反应的引导警报示例是看不见的。我手动编辑了样式并删除了“淡入”样式（对于标题为“check it out”的警报），警报显示。但它们都应该默认显示

我做错了什么？我是新来的。但我没想到这么简单的例子会出错

import React, { useState } from 'react';
import { Button, FormGroup, FormControl, FormLabel } from 'react-bootstrap';
import { Alert } from 'react-bootstrap';
import '../styles/login.css';

const Login: React.FC<{}> = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");  

...

    return (
        <div className="Login"> 
            <form onSubmit={handleSubmit}>
                <FormGroup controlId="email">
                    <FormLabel>Email</FormLabel>
                    <FormControl
                        autoFocus
                        type="string"
                        value={email}
                        onChange={(e: any) => setEmail(e.target.value)} />
                </FormGroup>
                <FormGroup controlId="password">
                    <FormLabel>Password</FormLabel>
                    <FormControl
                        value={password}
                        onChange={(e: any) => setPassword(e.target.value)}
                        type="password" />
                </FormGroup>
                <Button block disabled={!validateForm()} type="submit">
                    Login
                </Button> 

                <Alert key={1} variant="success">check it out!</Alert> 

                <Alert show={true} variant="success">
                    <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
                    <p>
                        Change this and that and try again. Duis mollis, est non commodo
                        luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
                        Cras mattis consectetur purus sit amet fermentum.
                    </p>
                </Alert>
            </form> 
        </div>
    );
}

export default Login;

import React，{useState}来自“React”；
从“react bootstrap”导入{Button、FormGroup、FormControl、FormLabel}；
从“react bootstrap”导入{Alert}；
导入“../styles/login.css”；
常量登录：React.FC=（）=>{
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
...
返回(
电子邮件
setEmail（e.target.value）}/>
密码
setPassword（e.target.value）}
type=“password”/>
登录
好的，官方文档中的示例默认为fade true。这意味着它们没有显示。这不是官方的，因为react bootstrap的文档没有这样说——react bootstrap的文档有。是react boostrap的竞争包

因此，在默认情况下，转换似乎是“淡入淡出”，这意味着新手将使用该示例，而看不到任何东西

react bootstrap文档确实提到了转换组，但没有说它们默认为false。它们也没有告诉如何内联表达转换。我正在尝试：transition={{Fade:{in:false}}。如果您需要了解这一点，请看。我尝试了内联和通过元素，但没有成功

如果我切换到reactstrap，示例警报显示如下代码：

 <Alert color='primary' fade={false}>check it out!</Alert>

看看吧！

这似乎比使用react引导测试版要简单得多。所以我将使用react引导来发出警报