Quiero acortar este código, especialmente en la oración [if~else if]. porque quiero modificar un className depende de cada accesorio.
export defalut function Button(props) { const { name, height, color, bgColor } = props; let className = color + ' ' +bgColor+ ' w-20 rounded border border-black border-solid '; if (height === 'small') { className += 'text-xs h-7'; } else if(height === 'medium') { className += 'text-base h-11'; } else if(height === 'large') { className += 'text-lg h-12'; } return ( <button className={className}>{name}</button> )}Use un objeto indexado por cadena de altura.
const classesByHeight = { small: 'text-xs h-7', medium: 'text-base h-11', large: 'text-lg h-12' }; // ... const className = `${classesByHeight[height]} ${color} ${bgColor} w-20 rounded border border-black border-solid`; Si la altura puede no ser una de esas, entonces alterne con la cadena vacía también para que no obtenga un undefined .
const className = `${classesByHeight[height] ?? ''} ${color} ${bgColor} w-20 rounded border border-black border-solid`;Puede usar la declaración de cambio para reemplazar if else como en el siguiente código:
switch(height) { case 'small': className += 'text-xs h-7'; break; case 'medium': className += 'text-base h-11'; break; case 'large': className += 'text-lg h-12'; break; default: className += ''; }