Fluent UI 是我用过的最难受的 React 库，没有之一！

[marcosteam]

如题，新网站想使用 Fluent UI，奈何微软夹带私货，只给 TS 案例，JS 版本完全没有。

遂拷贝一份文档的示例代码进去，打算调试，由于官网包已改名，把 fabric-ui 改成 @fluentui/react 。

（我非常想吐槽，Fluent UI 的官网文档跟一坨米田共一样，示例代码不但没有更新过，包管理、文档库还特别乱。写个导航栏要 import 各种奇奇怪怪的库。文档还只有 TS 版本，要知道其它的 React 组件库都是提供了 JS 和 TS 两种版本样例可供选择的，为了推广自家的 TS 真的是不择手段。）

新建 TSX，粘贴代码，一个字都没动，仅仅只是换了包名。

然后，parcel，渲染，没有报错。但是调试网页什么都没有。

我 X 你 X ！微软！

附：TSX 代码前面和后面部分。

为什么没有中间部分？因为中间我全部照搬的微软官网的Example，一个字都没有改过。

[marcosteam]

@yexiaoxing 那就奇怪了，为什么文档上写的是直接从 office-ui-fabric-react 上引入的...

[gaigechunfeng]

vue 选手隔岸观火

[yexiaoxing]

@marcosteam Nav? Nav 的文档里就是从 lib 引入的啊，https://developer.microsoft.com/en-us/fluentui/#/controls/web/nav

[marcosteam]

@yexiaoxing 额...我说的是 button

[yexiaoxing]

@marcosteam 把你的完整代码贴到 gist 上我看看？

[marcosteam]

@yexiaoxing https://gist.github.com/marcosteam/f1bb15e047c93940b7b9d6f355dd9c33

[yexiaoxing]

我这是正常的，检查一下你的 tsconfig webpack 之类的？
@marcosteam

[marcosteam]

@yexiaoxing 不知道是不是楼上说的 index.ts 设置不对，但是我还是不知道怎么配置。

[qW7bo2FbzbC0]

现在 ES6 的 OOP 加强了这么多，大家以为 ES 加上 TS 会主键纯 OOP 化，没想到 react 确是 OOP 与 fp 混杂着用的

[marcosteam]

@yexiaoxing 顺带一提，我用的 parcel，不想折腾那么多，重装了一下 fluentui 还是只能 import lib 文件夹里面的内容，不带 lib 就不能渲染。

[minglanyu]

饿了么的 Element 已经 2 年没更新了 做开源真的需要责任心的。

[yexiaoxing]

@marcosteam 有可能是 parcel 的兼容性问题，我看 edge inspector 里有报错 Uncaught TypeError: Cannot redefine property: MAX_COLOR_SATURATION 。

搜了一下，应该是因为 https://github.com/parcel-bundler/parcel/issues/4399

[dodo2012]

@minglanyu 前阵不是更新过？

[marcosteam]

@yexiaoxing
哈哈，确实，看来是 parcel 的锅？
这个时候如果改用 webpack...可惜我不会用，我更喜欢这种懒人开箱即用的→_→

[hantsy]

@hjahgdthab750 React 仅仅是喜欢 TS 的 Type 部分，代替它自己的以前的 FLow （ Facebook Flow ），并不喜欢 OOP，除了现在有一个 React.component 可以写成 Class，其它 React 并没有扩展 OOP 支持，所有的东西还是 Function 为主。

[qW7bo2FbzbC0]

@hantsy 不知道是我记错了，还是看错了，react 手册或者 antd 里面有很多 extend 这种用法吧

[hantsy]

@hjahgdthab750 除了 Stateful Component，其它用现代 ES6 方式 Function 更简洁。

const Button=(props)=> <button ...props></button>

[qW7bo2FbzbC0]

用 OOP 写后端的人，切到前端编辑器时，总是会不由自主的 OOP 化。所以还是想一路 OOP 到底