React Bootstrap 警告框

17 Mar 2025 | 4 分钟阅读

Alert 是一个用于显示消息的有用组件。警报具有不同的颜色来指定消息。例如，要显示成功消息，我们使用绿色，对于危险消息，我们使用红色。 Bootstrap 警报的设计方式使其根据其用途表示消息。如果我们使用带有 success 变体的 Alert，消息文本将为绿色。同样，其他变体也有不同的颜色。

警报为典型的用户操作提供上下文反馈消息，并根据警报类型指定消息。默认情况下，警报是全宽的，但我们可以为警报消息指定宽度并选择其他选项，例如关闭按钮。关闭按钮是可选的；如果需要，我们可以使用它。

Bootstrap 提供了 8 种警报变体；如下所示

主要
次要
成功
危险
警告
info
轻微
深色 (dark)

如何使用 Alert 组件？

要使用 Alert 组件，将其定义为 < Alert>Your message</Alert> 并按如下方式导入

变体 prop 用于定义 Alert 组件的变体。

考虑下面的示例

App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import {Container , Alert} from 'react-bootstrap'
function App() {
  return (
    <div className="App">
   <Container className='p-4'>
   <Alert variant="success">Data is saved sucessfully</Alert>
</Container>
    </div>
  );
}
export default App;

输出

同样，我们可以使用 Alert 组件的其他变体。

所有警报变体

我们使用 React Map 函数一次渲染所有警报变体。

App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import {Container, Col, Alert} from 'react-bootstrap'
function App() {
  return (
    <div className="App">
   <Container className='p-4'>
     <Col md="6">
   {
     [
      'primary',
      'secondary',
      'success',
      'danger',
      'warning',
      'info',
      'light',
      'dark',
    ].map((variant, idx) => (
      <Alert key={idx} variant={variant}>
        This is a {variant} alert message?Let's have a look!
      </Alert>
    ))
   }
   </Col>
</Container>
    </div>
  );
}
export default App;

输出

颜色使文本具有意义并提供视觉指示。这就是为什么每个警报消息都有一些特定的颜色来指示用户的原因。

添加关闭图标

我们还可以添加一个关闭图标来关闭警报消息。 dismissible prop 用于向警报消息添加关闭图标。我们必须使用 useState Hook 来显示或隐藏警报组件。

考虑下面的示例

App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import { useState } from 'react';
import {Container, Button , Alert} from 'react-bootstrap';
function App() {
   const [show, setShow] = useState(true)
if (show){
  return (
    <div className="App">
   <Container className='p-4'>
   <Alert variant="success" onClose={() => setShow(false)} dismissible >
   <Alert.Heading>Ooops! an error occured!</Alert.Heading>
   <p>
     Update your setting and run again</p>
   </Alert>
</Container>
    </div>
  );
}
return(
  <>
  <Button className='p-3 m-3' variant='primary' onClick={() => setShow(true)}>Show Alert</Button>
  </>
)
}
export default App;

输出

当我们单击关闭图标时，它将隐藏警报消息并显示显示警报按钮。

当我们单击显示警报按钮时，它将显示警报消息。这就是我们如何使用 React Bootstrap 切换警报消息的方式。

我们还可以使用手动按钮来隐藏警报消息，以创建更具吸引力和意义的用户界面。

手动隐藏警报

要为警报创建手动隐藏按钮，我们需要使用 onClick 事件更新其状态。

考虑下面的示例

import 'bootstrap/dist/css/bootstrap.min.css';
import { useState } from 'react';
import {Container, Button , Alert} from 'react-bootstrap';
function App() {
   const [show, setShow] = useState(true)
if (show){
  return (
    <div className="App">
   <Container className='p-4'>
   <Alert variant="success">
   <Alert.Heading>Ooops! an error occured!</Alert.Heading>
   <p>
     Update your setting and run again</p>
     <Button variant="danger" onClick={() => setShow(false)}>Hide Alert</Button>
   </Alert>
</Container>
    </div>
  );
}
return(
  <>
  <Button className='p-3 m-3' variant='primary' onClick={() => setShow(true)}>Show Alert</Button>
  </>
)
}
export default App;

输出

当我们单击隐藏警报按钮时，它将隐藏警报。因此，我们可以定义一个手动按钮来隐藏警报消息。

添加导航链接

要添加带有警报消息的导航链接，我们可以使用 < Alert.Link> 组件来指定任何具有匹配颜色的链接。

考虑下面的示例

App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import {Container , Alert} from 'react-bootstrap'
function App() {
  return (
    <div className="App">
   <Container className='p-4'>
   <Alert variant='danger'>
  You are on a wrong page navigate to {''}
    <Alert.Link href="#">this link</Alert.Link> for right access.
  </Alert>
</Container>
    </div>
  );
}
export default App;

输出

添加其他内容

Alert 组件允许我们向消息添加其他内容。我们可以使用警报组件添加标题、段落，甚至图像，使其更具体。

要添加带有警报消息的附加组件，请在 <Alert></Alert> 组件中定义它。考虑下面的例子

App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import {Container , Alert} from 'react-bootstrap'
function App() {
  return (
    <div className="App">
   <Container className='p-4'>
   <Alert variant='primary'>
    <Alert.Heading>Alert Title</Alert.Heading>
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</span>
  </Alert>
</Container>
    </div>
  );
}
export default App;

输出

下一个主题React Bootstrap Breadcrumbs

← 上一个下一个 →

React Bootstrap 警告框

如何使用 Alert 组件？

所有警报变体

添加关闭图标

手动隐藏警报

添加导航链接

添加其他内容

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Bootstrap 教程

React Bootstrap 警告框

如何使用 Alert 组件？

所有警报变体

添加关闭图标

手动隐藏警报

添加导航链接

添加其他内容

相关帖子

React Bootstrap 网格系统

React Bootstrap 导航栏

React Bootstrap 分页

React Bootstrap 面包屑

React Bootstrap 导航

React Bootstrap 轮播图

React Bootstrap 列表组

React Bootstrap 覆盖层

React Bootstrap 安装

React Bootstrap 卡片

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器