bootstrap-react或者bootstrap-vue

2021-07-27 17:58:00 浏览数 (1)

作者：Cat Chen 链接：https://www.zhihu.com/question/384208589/answer/1124061171 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Bootstrap 这种用 CSS composition（也就是类名组合）的库，没办法上 React 获得任何的优势吧。

第一种上 React 的思路是继续以提供 CSS 为主，那跟现状没什么不同啊。现在你也可以在 React 组件中用一堆 Bootstrap 的 CSS 类啊，写在 className 就可以了……

第二种上 React 的思路是提供 React 组件。那 Bootstrap 能提供什么类型的组件呢？如果还是提供 CSS 的话，那就必须要支持同样的 composition。那 React 中 composition 怎么做呢？HOC 咯。所以原本可能这样写的：

代码语言：javascript复制
<Component className="text-white bg-dark m-2" />

HOC 改成这样写：

代码语言：javascript复制
<TextWhite>
  <BackgroundDark>
    <Margin2>
      <Component />
    </Margin2>
  </BackgroundDark>
</TextWhite>

或者是这样写：

代码语言：javascript复制
withTextWhite(withBackgroundDark(withMargin2(Component)));

又或者是这样写：

代码语言：javascript复制
import { compose } from 'redux'

export default compose(
  withTextWhite,
  withBackgroundDark,
  withMargin2
)(Component)

何必呢？

对比 Material-UI，别人用 React 是因为每个组件有独立的 JavaScript 功能。Bootstrap 的 JavaScript 功能很少，一个 jQuery 就解决了，甚至现在很多人喊着 Bootstrap 要出一个不依赖 jQuery 的版本，那是不太需要以组件的方式进行封装的。

react bootstrap css javascript jquery

0 人点赞