道具

Question

我为reactjs找到了两个不同的引导程序

npm install --save reactstrap react react-dom
npm install react-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;

vs 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

以为我要加2便士。我走了另一条路，在转向React之前，通过Android开发学习了React Native。

使用Reactstrap的前一种方法更接近于我们如何通过Web开发和Bootstrap完成工作，而使用后者的方法更接近于我如何在React Native即基于组件的开发中完成工作。

使用案例确实很有意义，但是如果您的动态页面包含很多活动部件，我建议您使用React-Bootstrap库，因为实现更接近于组件模型，并且可以使您页面元素可重用（不是您不能使用以前的Reactstrap库做到这一点）。

我之所以选择Reactstrap是因为它提供了所有Bootstrap 4的开箱即用功能，而这正是我所需要的。

Answer 3

我不是React的专家，但发现了一个有趣的比较可能对您有所帮助：https://npmcompare.com/compare/bootstrap,react-bootstrap,reactstrap

根据给定的统计数据，明显的赢家是react-bootstrap。

谢谢。

Answer 4

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

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

Answer 5

官方文档：

从使用的角度来看，两者的工作方式相同：

他们需要 sudo chown -R $USER /var/www/project/storage sudo chown -R $USER /var/www/project/bootstrap/cache 在 index.js 或 App.js 中导入 Bootstrap 样式表文件，以使用 npm install bootstrap 启用 Bootstrap 默认样式。默认情况下，ReactJS 会将所有 Bootstrap CSS 代码附加到 HTML 页面头部内的样式标记中。

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

为我们提供在内部重新设计为 JSX 的现成的 Bootstrap 组件，无需使用 JQuery 或 Javascript 直接 DOM 操作（使用虚拟 DOM，因为 React 已经默认工作）；
在幕后，使用 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 ); 渲染组件；

道具

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

React.createElement

props 名称是不同的 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，但是渲染的 HTML 几乎相同，正如我们在 DevTools 中看到的：

Alt Text

幕后制作

您可以查看这两种实现，将基本组件作为包源代码中的 variant 进行比较：

node_modules\react-bootstrap\cjs\Button.js (React Bootstrap ^1.6.0);
node_modules\reactstrap\dist\reactstrap.cjs.js line:930 (Reactstrap v^8.9.0);

反应引导

Button

反应带

var Button = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var bsPrefix = _ref.bsPrefix,
      variant = _ref.variant,
      size = _ref.size,
      active = _ref.active,
      className = _ref.className,
      block = _ref.block,
      type = _ref.type,
      as = _ref.as,
      props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["bsPrefix", "variant", "size", "active", "className", "block", "type", "as"]);
  var prefix = (0, _ThemeProvider.useBootstrapPrefix)(bsPrefix, 'btn');
  var classes = (0, _classnames.default)(className, prefix, active && 'active', variant && prefix + "-" + variant, block && prefix + "-block", size && prefix + "-" + size);

  if (props.href) {
    return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({}, props, {
      as: as,
      ref: ref,
      className: (0, _classnames.default)(classes, props.disabled && 'disabled')
    }));
  }

  if (ref) {
    props.ref = ref;
  }

  if (type) {
    props.type = type;
  } else if (!as) {
    props.type = 'button';
  }

  var Component = as || 'button';
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
    className: classes
  }));
});

Button.displayName = 'Button';
Button.defaultProps = defaultProps;
var _default = Button;
exports.default = _default;
module.exports = exports["default"];

尽管存在一些差异，例如使用 var Button = /*#__PURE__*/function (_React$Component) { _inheritsLoose(Button, _React$Component); function Button(props) { var _this; _this = _React$Component.call(this, props) || this; _this.onClick = _this.onClick.bind(_assertThisInitialized(_this)); return _this; } var _proto = Button.prototype; _proto.onClick = function onClick(e) { if (this.props.disabled) { e.preventDefault(); return; } if (this.props.onClick) { return this.props.onClick(e); } }; _proto.render = function render() { var _this$props = this.props, active = _this$props.active, ariaLabel = _this$props['aria-label'], block = _this$props.block, className = _this$props.className, close = _this$props.close, cssModule = _this$props.cssModule, color = _this$props.color, outline = _this$props.outline, size = _this$props.size, Tag = _this$props.tag, innerRef = _this$props.innerRef, attributes = _objectWithoutPropertiesLoose(_this$props, ["active", "aria-label", "block", "className", "close", "cssModule", "color", "outline", "size", "tag", "innerRef"]); if (close && typeof attributes.children === 'undefined') { attributes.children = /*#__PURE__*/React__default.createElement("span", { "aria-hidden": true }, "\xD7"); } var btnOutlineColor = "btn" + (outline ? '-outline' : '') + "-" + color; var classes = mapToCssModules(classNames(className, { close: close }, close || 'btn', close || btnOutlineColor, size ? "btn-" + size : false, block ? 'btn-block' : false, { active: active, disabled: this.props.disabled }), cssModule); if (attributes.href && Tag === 'button') { Tag = 'a'; } var defaultAriaLabel = close ? 'Close' : null; return /*#__PURE__*/React__default.createElement(Tag, _extends({ type: Tag === 'button' && attributes.onClick ? 'button' : undefined }, attributes, { className: classes, ref: innerRef, onClick: this.onClick, "aria-label": ariaLabel || defaultAriaLabel })); }; return Button; }(React__default.Component); 实现的原型的方法，特别是在此组件中，一些额外道具的处理，但总的来说，它们之间没有显着差异。

组件列表

可用组件有 80% 到 90% 相同，其中一些只是名称不同。

React Bootstrap：警报、手风琴、徽章、面包屑、按钮、按钮组、卡片、轮播、下拉菜单、数字、表单、输入组、图像、大屏幕、列表组、模式、导航、导航栏、叠加层、分页、弹出框、进度、微调器、表格、标签、工具提示、吐司。

Reactstrap：警报、徽章、面包屑、按钮下拉菜单、按钮组、按钮、卡片、轮播、折叠、下拉菜单、淡入淡出、表单、输入组、大屏幕、布局、列表、列表组、媒体、模态、导航栏、导航、分页、弹出框、进度、微调器、表格、标签、吐司、工具提示。

基准

你可以看到我关于它的完整原始帖子here

Answer 6

React-bootstrap和reactstrap看起来很相似，并且都具有众所周知的“ bootstrap ”功能。如果您也想从中选择，请使用react-bootstrap。

React-bootstrap于2014年推出。因此react-bootstrap具有更多功能版本，未解决的问题数量更少，并且已在许多项目中使用。

Reactstrap于2016年问世。与其他绅士相比 reactstrap的版本数量较少。但是反应变得越来越频繁更新与其他相比。

reactstrap和react-bootstrap有什么区别？

6 个答案:

道具

幕后制作

反应引导

反应带

组件列表

基准