流行的 React 组件库（如 MUI/Bootstrap）如何更改元素的类名？

Question

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

If you look at the multiselect at this link, and inspect element, when you click into the input you'll see the main div element change classnames from 'rw-popup-container' to 'rw-popup-container rw-slide-transition-exited'. The class 'rw-slide-transition-exited' contains display=none in css which makes the dropdown disappear.

This process of adding/subtracting classnames is extremely snappy and common among various React libraries like MUI/React Bootstrap. You can inspect the source HTML and see they are all doing it. How, exactly, are they doing this? I've looked through the source JS but I can't figure it out. It doesn't appear to be jQuery addClass()/removeClass() and they are doing conditional rendering in React (which is laggy from personal experience).

Answer 1

As you said, this is pretty commong in React libraries (VueJs and Angular libraries as well). All the modern javascript frameworks have a way to conditionally set the styles of a component, and they just refresh that attribute, there's no need to re-render everything.

Particullary for React, you can unse the "className" proeprty for that, instead of passing an string you can pass a function, and that will dynamically change the classes in the component.

Example:

Using the same example you used, if you go here, you'll see the code for that component.

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

(I marked line 632, because that's were the magic happens)

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

In there you can see that className is getting a function (since it's between curly brackets it will be evaluated instead of just passing the value).

And if I'm correct, it is using this other library: https://github.com/JedWatson/classnames

which allows you to conditionally set classes.