twitter-bootstrap - 使用 react-bootstrap 优于 bootstrap 的优势

Question

使用 react-bootstrap 有什么意义？在普通的旧 Bootstrap 上？

我正在经历https://react-bootstrap.github.io/components.html我没有看到任何优势。我只能看到它会给项目带来不必要的依赖。

在 React/Redux 项目中使用普通的 Bootstrap 有什么困难吗？

**编辑 **

从阅读中推断 https://react-bootstrap.github.io/introduction.html是唯一的 react-bootstrap给我类名的简写？以下是同一页面的示例。

在 plain boostrap我会做:

var button = React.DOM.button({
  className: "btn btn-lg btn-success",
  children: "Register"
});

React.render(button, mountNode);

在 react-boostrap :

var button = ReactBootstrap.Button({
  bsStyle: "success",
  bsSize: "large",
  children: "Register"
});

React.render(button, mountNode);

所有这些 bsStyle, bsSize, ...来自 react-boostrap是人们在 Angular 上不喜欢的东西吗？记得所有那些 ng-*标签...我个人不介意，但如果这是唯一的 react-bootstrap给我我会用 twitter-bootstrap .还是我错过了什么？

Answer 1

React-bootstrap 为您创建 React 组件。

如果您考虑如何在 React 项目中借助 bootstrap 来制作动画，其优势将是显而易见的。

如果没有 react-bootstrap，你需要 CSSTransitionGroup 之类的东西。你不能利用 bootstrap 的 API，因为它会操纵 DOM，这使得 React 的行为不可预测。此外，bootstrap 将隐藏其动画 API 的详细信息；也就是说，你根本无法使用它。

但是，使用 bootstrap 组件，您无需担心 bootstrap 是如何实现动画的，您只需要在组件中指定属性和钩子(Hook)，库就可以解决问题。更具体地说，它可以添加一些对客户端不可见的包装器。



如上所示，<Fade>和 <Transition>组件由 Bootstrap 添加。

此外，虚拟 DOM 的语法可能与 DOM 不兼容:



如上图，把<input>在 <select> 内是语义 UI 的一种方式，但 React 会提示。我希望 Bootstrap 在没有自定义库的情况下可能会遇到类似的问题。