为什么选择 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 (
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <strong>Oh snap! You got an error!</strong>
      <p>Change this and that and try again.</p>
      <button
        type="button"
        class="close"
        data-dismiss="alert"
        aria-label="Close"
      >
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  );
}

React-Bootstrap

import * as React from 'react';
import Alert from 'react-bootstrap/Alert';

function Example() {
  return (
    <Alert dismissible variant="danger">
      <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
      <p>Change this and that and try again.</p>
    </Alert>
  );
}

带有状态的 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 ( <> <Alert show={show} variant="success"> <Alert.Heading>My Alert</Alert.Heading> <p> Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. </p> <hr /> <div className="d-flex justify-content-end"> <Button onClick={() => setShow(false)} variant="outline-success"> Close me </Button> </div> </Alert> {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>} </> ); } export default AlertDismissible;

import { useState } from 'react';
import Alert from 'react-bootstrap/Alert';
import Button from 'react-bootstrap/Button';

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

  return (
    <>
      <Alert show={show} variant="success">
        <Alert.Heading>My Alert</Alert.Heading>
        <p>
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
          lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
          fermentum.
        </p>
        <hr />
        <div className="d-flex justify-content-end">
          <Button onClick={() => setShow(false)} variant="outline-success">
            Close me
          </Button>
        </div>
      </Alert>

      {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
    </>
  );
}

export default AlertDismissible;

Bootstrap

<div class="alert alert-success alert-dismissible fade show firstCollapsible" role="alert">
  <strong>How's it going?!</strong>
  <p>
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
    eget lacinia odio sem nec elit. Cras mattis consectetur purus sit
    amet fermentum.
  </p>
  <hr/>
  <div class="d-flex justify-content-end">
	<button type="button" class="btn btn-outline-success">Close me ya'll!</button>
  </div>
</div>
<div class="d-flex justify-content-start alert fade show">
	<button type="button" class="btn btn-primary d-none secondCollapsible">Show Alert</button>
</div>

$('.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');
})