流行的 React 組件庫（如 MUI/Bootstrap）如何更改元素的類名？

Question

https://jquense.github.io/react-widgets/docs/Multiselect/

如果您查看此鏈接的多選並檢查元素，當您單擊輸入時，您會看到主 div 元素將類名從“rw-popup-container”更改為“rw-popup-container rw-slide-transition” -退出'。 class 'rw-slide-transition-exited' 在 css 中包含 display=none 這使得下拉列表消失。

這種添加/減去類名的過程非常快速，並且在 MUI/React Bootstrap 等各種 React 庫中很常見。 您可以檢查源代碼 HTML，看看他們都在這樣做。 他們究竟是怎么做到的？ 我已經查看了源 JS，但我無法弄清楚。 它似乎不是 jQuery addClass()/removeClass() 並且他們正在 React 中進行條件渲染（從個人經驗來看這是滯后的）。

Answer 1

正如您所說，這在 React 庫（以及 VueJs 和 Angular 庫）中很常見。 所有現代 javascript 框架都有一種方法可以有條件地設置組件的 styles，它們只是刷新該屬性，無需重新渲染所有內容。

特別是對於 React，您可以為此取消“className”屬性，而不是傳遞一個字符串，您可以傳遞一個 function，這將動態更改組件中的類。

例子：

使用您使用的相同示例，如果您在此處輸入 go，您將看到該組件的代碼。

https://github.com/jquense/react-widgets/blob/f604f9d41652adc29ccd3455bf17997bc001d9ef/packages/react-widgets/src/Multiselect.tsx#L632

（我標記了第 632 行，因為那是奇跡發生的地方）

className={cn(className, 'rw-multiselect')}

在那里你可以看到 className 得到了一個 function（因為它在大括號之間，它將被評估而不是僅僅傳遞值）。

如果我是對的，它正在使用另一個庫： https://github.com/JedWatson/classnames

這允許您有條件地設置類。