使用 react-bootstrap 优于 bootstrap 的优点 [英] Advantages of using react-bootstrap over bootstrap
问题描述
在普通的旧 Bootstrap 上使用
如上所示，
另外，虚拟 DOM 的语法可能与 DOM 不兼容:
如上所示，将 放在 中是一种语义 UI 方式，但 React 会抱怨.我希望引导程序在没有自定义库的情况下可能会遇到类似的问题.
What's the point in using react-bootstrap over plain old Bootstrap?
I was going through https://react-bootstrap.github.io/components.html and I don't see any advantage. I can only see that it can bring unnecessary dependency to the project.
Is there any difficulty in using plain Bootstrap in React/Redux projects?
**EDIT **
Deducing from reading https://react-bootstrap.github.io/introduction.html is the only thing that react-bootstrap gives me the shorthand for class names? Below are the examples of the same page.
In plain boostrap I'd do:
var button = React.DOM.button({
className: "btn btn-lg btn-success",
children: "Register"
});
React.render(button, mountNode);
And in react-boostrap:
var button = ReactBootstrap.Button({
bsStyle: "success",
bsSize: "large",
children: "Register"
});
React.render(button, mountNode);
All these bsStyle, bsSize, ... from react-boostrap are the things people didn't like on Angular that have remember all those ng-* tags... I personally don't mind it but if it's the only thing that react-bootstrap gives me I will use twitter-bootstrap. Or did I miss something?
React-bootstrap creates React components for you.
The advantage will be obvious if you consider how to do animations with the help of bootstrap in your React project.
Without react-bootstrap, you need something like CSSTransitionGroup. You cannot take advantage of bootstrap's API because it will manipulate the DOM, which makes the React behavior unpredictable. Also, bootstrap will hide details of their animation API; that is to say,you cannot use it at all.
With bootstrap components, however, you do not need to worry about how the animation is implemented by bootstrap, you just need to specify properties and hooks in a component and the library will do the trick. More specifically, it can add some wrappers which are not visible to the client.
As you can see above, <Fade> and <Transition> component is added by bootstrap.
In addition, the syntax of virtual DOM may not be compatible with DOM:
As shown above, putting <input> inside a <select> is a way of semantic UI, but React will complain. I expect the bootstrap may experience similar issues without a customized library.
这篇关于使用 react-bootstrap 优于 bootstrap 的优点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
