React中借助高阶函数生成类名

一 需求

需要多个较长相同前缀的类名。这里借助高阶函数，可以自定义前缀

二 代码

function scopedClassMaker(prefix:string){
    return function scopedClass(name?:string){
        return [prefix,name].filter(Boolean).join('-');
    }
}
export default scopedClassMaker;

//使用
const sc=scopedClassMaker('peachui-dialog');

interface dialogProps {
    visible:Boolean
}
const Dialog:React.FC<dialogProps>=(props)=>{
    return(
        props.visible?
        <>
            <div className={sc('mask')}/>
            <div className={sc()}>
                <div className={sc('close')}>
                    <Icon name="close"/>
                </div>
                <header className={sc('header')}>
                    提示
                </header>
                <main className={sc('main')}>
                    {props.children}
                </main>
                <footer className={sc('footer')}>
                    <button>
                        ok
                    </button>
                    <button>
                        cancel
                    </button>
                </footer>
            </div>
        </>
        :null
    )
}

三 效果