为什么选择 React-Bootstrap？React-Bootstrap 是使用 React 对 Bootstrap 组件进行的完整重新实现。它 不依赖于 bootstrap.js 或 jQuery。 如果你已经设置了 React 并安装了 React-Bootstrap，你拥有了所需的一切。

使用 jQuery 的方法和事件是通过直接操作 DOM 来实现的。相反，React 使用对状态的更新来更新虚拟 DOM。通过这种方式，React-Bootstrap 通过将 Bootstrap 功能整合到 React 的虚拟 DOM 中，提供了一种更可靠的解决方案。以下是一些 React-Bootstrap 组件与 Bootstrap 组件不同的示例。

一个简单的 React 组件​

Bootstrap 组件的 CSS 和细节比较有主见，而且很长。React-Bootstrap 通过将原始 Bootstrap 压缩成 React 风格的组件来简化了这一点。

Bootstrap​

import * as React from 'react';function Example() { return (

React-Bootstrap​

import * as React from 'react';import Alert from 'react-bootstrap/Alert';function Example() { return ( Oh snap! You got an error!

Change this and that and try again.

带有状态的 Bootstrap​

由于 React-Bootstrap 是使用 React Javascript 构建的，因此可以在 React-Bootstrap 组件中将状态作为道具传递。它还使状态管理变得更容易，因为更新是使用 React 的状态进行的，而不是直接操作 DOM 的状态。这也为创建更复杂的组件提供了很大的灵活性。

React-bootstrap​

结果加载中...实时编辑器import { useState } from 'react';import Alert from 'react-bootstrap/Alert';import Button from 'react-bootstrap/Button';

function AlertDismissible() { const [show, setShow] = useState(true);

return ( <> My Alert

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

{!show && setShow(true)}>Show Alert} );}

export default AlertDismissible;

Bootstrap​

$('.btn-outline-success').on('click', function(e) { $('.firstCollapsible').addClass('d-none'); $('.secondCollapsible').removeClass('d-none');})$('.btn-primary').on('click', function(e) { $('.firstCollapsible').removeClass('d-none'); $('.secondCollapsible').addClass('d-none');})