reactstrap和react-bootstrap有什么区别？

Question

我发现了两个不同的 Reactjs 引导程序

1. npm安装--保存reactstrap反应react-dom
2. npm 安装react-bootstrap bootstrap

两者之间的基本和主要区别是什么？

Answer 1

我自己一直在努力解决这个问题，就像@Besart Marku 说，高度基于意见。

对我来说确实有区别的一件事是，reactstraps 文档在很多代码示例中使用状态：

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalExample; 

与react-bootstrap使用函数和Hooks相比：

function MyVerticallyCenteredModal(props) {
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}

function App() {
  const [modalShow, setModalShow] = React.useState(false);

  return (
    <ButtonToolbar>
      <Button variant="primary" onClick={() => setModalShow(true)}>
        Launch vertically centered modal
      </Button>

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </ButtonToolbar>
  );
}

render(<App />);

我没有给出一个答案，说其中一个比另一个更好，这是一种偏好，对我个人来说，我用reactstrap发泄，因为我更倾向于使用类组件而不是Hooks，所以完成了我可以用最小的努力进行调整的示例就成功了。

Answer 2

它们是两个不同的库，但都基于 Bootstrap 组件。

一些关于他们的小统计数据 https://www.npmtrends.com/react-bootstrap-vs-reactstrap

Answer 3

官方文档：

• 反应引导
• 反应带

两者的工作原理是一样的，从使用角度来看：

• 他们需要

  npm install bootstrap

  在index.js或App.js中导入Bootstrap样式表文件，以使用

  import 'bootstrap/dist/css/bootstrap.min.css';

  启用Bootstrap默认样式。默认情况下，ReactJS 会将所有 Bootstrap CSS 代码附加到 HTML 页面头部内的样式标签中。

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import "bootstrap/dist/css/bootstrap.min.css";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

• 为我们提供现成的 Bootstrap 组件，在内部重新设计为 JSX，无需使用 JQuery 或 Javascript 进行直接 DOM 操作（使用虚拟 DOM，因为 React 默认情况下已经可以使用）；
• 在幕后，使用

  React.createElement

  渲染组件；

道具

根据包的不同，传递给组件的 props 可以有不同的名称。请参阅按钮颜色用法：https://codesandbox.io/s/reactbootstrapvsreactstrap-7y87c-7y87c?file=/src/App.js

import React from "react";

import { Button as ReactBootstrapButton } from "react-bootstrap";
import { Button as ReactstrapButton } from "reactstrap";

const App = () => (
  <>
    <ReactBootstrapButton variant="danger">React BootStrap</ReactBootstrapButton>
    <ReactstrapButton color="danger">Reactstrap</ReactstrapButton>
  </>
);

export default App;

道具名称不同

color

和

variant

，但渲染的 HTML 几乎相同，正如我们在 DevTools 中看到的：

幕后花絮

您可以查看这两种实现，将基本组件与包源代码中的

Button

进行比较：

• 节点模块 act-bootstra