凌乱的类名建设

Question

任何人都可以建议一种方法来清理这个凌乱的classname结构:

const ButtonTemplate = props => {
  const themed = `btn-${props.theme}`
  const themedButton = `${styles[themed]} ${themed}${(props.disabled) ? ' disabled' : ''}}`

  return (
    <button className={`${styles.btn} ${themedButton}`} type='button' onClick={props.onClick}>{props.children}</button>
  )
}

Answer 1

关于什么

function ButtonTemplate({theme, disabled, onClick, children}) {
  const themed = `btn-${theme}`;
  return (
    <button className={[
      styles.btn,
      styles[themed],
      themed,
      disabled ? 'disabled' : ''
    ].join(" ")} type='button' onClick={onClick}>{children}</button>
  );
}