React uses higher-order functions to generate class names

A demand

Multiple long class names with the same prefix are required. Here, with the help of higher-order functions, you can customize the prefix

The second code

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

/ / use
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')} >prompt</header>
                <main className={sc('main')} >
                    {props.children}
                </main>
                <footer className={sc('footer')} >
                    <button>
                        ok
                    </button>
                    <button>
                        cancel
                    </button>
                </footer>
            </div>
        </>
        :null)}Copy the code

Effect of three