Antd's tool function getprefixcls gets the public prefix

I was there before. antd There is a practice in , Is to get the public prefix through a function .
I feel this method is very good , So I also wrote a similar tool function for extracting public prefixes

export const setCommonCls = (...wrapperPrefix: string[]) => {
    
  return (className) =>
    wrapperPrefix
      .concat(className)
      .reduce((prefix, curPrefix) => `${
      prefix}-${
      curPrefix}`);
};

The reason why I think of this is that I'm writing react Component time , The class names of general components and page components should be distinguished , Of course, if you use css module Words , This may not make much sense .

stay react In general components
If you define a general prefix, you can use

const prefix = "prefix";
const getCls = setCommonCls("comp", prefix);
console.log(getCls("demo")); // 'comp-prefix-demo'

The significance lies in the unified management when we change the prefix of class name later , Make changes

Inspiration is to see antd There is such a function in

getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
    
    if (customizePrefixCls) return customizePrefixCls;
    return suffixCls ? `${
      getGlobalPrefixCls()}-${
      suffixCls}` : getGlobalPrefixCls();
  }