我为 reactjs 找到了两个不同的引导程序
两者的基本和主要区别是什么？
【问题讨论】：
react-bootstrap 似乎更活跃。我对react-bootstrap 有一些经验，不能说我很喜欢它——我仍然使用很多类而不是在组件上使用道具，因为它们丢失了很多，并且在某些情况下文档不清楚或缺少示例，但是在检查了reactstrap 之后，我想我会继续使用react-bootstrap，因为他们的文档看起来更糟，虽然不确定代码
标签： reactjs react-bootstrap reactstrap
它们是 2 个不同的库，但都基于 Bootstrap 组件。
关于它们的一些小统计数据 https://www.npmtrends.com/react-bootstrap-vs-reactstrap
【讨论】：
我自己一直在努力解决这个问题，就像@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，所以完成了我可以用最少的努力进行调整的示例确实诀窍。
【讨论】：
我想我会加我的 2 便士。我是反过来的，在学习 React Native 和 Android 开发之前，我转向了 React。
使用 Reactstrap 的前一种方法更接近于我们使用 Web 开发和 Bootstrap 的方式，而后者更接近于我在 React Native 中的方式，即基于组件的开发。
用例确实很有意义，但是如果您有一个包含许多移动部件的动态页面，我建议您使用 React-Bootstrap 库，因为该实现更接近组件模型，并且可以让您制作您的页面元素可重用（并不是说你不能用以前的 Reactstrap 库做到这一点）。
我现在使用 Reactstrap 只是因为它提供了开箱即用的所有 Bootstrap 4，而这正是我所需要的。
【讨论】：
我不是 React 专家，但发现了一个有趣的比较可能对您有帮助：https://npmcompare.com/compare/bootstrap,react-bootstrap,reactstrap
根据给定的统计数据，明显的赢家是 react-bootstrap。
谢谢。
【讨论】：
官方文件：
从使用的角度来看，两者的工作方式相同：
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
);
React.createElement渲染组件；根据包的不同，传递给组件的 props 可以有不同的名称。查看 Button 颜色用法：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;
props 名称不同 color 和 variant，但渲染的 HTML 几乎相同，正如我们在 DevTools 中看到的那样：
您可以查看这两种实现，将包源代码中的基本组件与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);
尽管有一些不同，比如reactstrap实现的prototype的使用方法，特别是在这个组件中，一些额外props的处理，总的来说，它们之间没有显着差异。
可用组件有 80% 到 90% 相同，其中一些只是名称不同。
React Bootstrap：警报、手风琴、徽章、面包屑、按钮、按钮组、卡片、轮播、下拉菜单、图形、表单、输入组、图像、Jumbotron、列表组、模态、导航、导航栏、叠加层、分页、弹出框、进度、微调器、表格、选项卡、工具提示、Toast。
Reactstrap：警报、徽章、面包屑、按钮下拉菜单、按钮组、按钮、卡片、轮播、折叠、下拉菜单、淡入淡出、表单、输入组、Jumbotron、布局、列表、列表组、媒体、模态框、导航栏、导航、分页、弹出框、进度、微调器、表格、标签、Toasts、工具提示。
你可以看到我关于它的完整原始帖子here
【讨论】：