Замена классов операторами в react чтобы исключить повторы кода

Question

Пытаюсь реализовать вот такую замену для кнопок из разных классов - оптимизация кода. У человека работает а у меня нет, эксплорер не делает замену, просто ставит условия в браузер. Подскажите, как исправить?

function Button({type, title, disable, onclick}) {
  return (

<button className={'btn ${type === "add" && "add")||(type === "remove" && "remove")||(type === "checkout" && "checkout"}'}
    disable={disable}
    onclick={onclick}
    >{title}
    </button>

);}

export default Button;

Answer 1

Подскажите, как исправить?

Например сделать вот так...

//
function Button({type, title, disable, onclick}) {
  const cls = ['btn']
  if (type) cls.push(type)
  return (
    <button className={cls.join(' ')}
      disable={disable}
      onClick={onclick}
      >{title}
    </button>
  )
}
//
function App() {
  return <div>
    <Button type={'add'} title={'Пример 1'} onclick={_ => alert(1)} />
    <Button type={'remove'} title={'Пример 2'} onclick={_ => alert(2)} />
    <Button type={'checkout'} title={'Пример 3'} onclick={_ => alert(3)} />
  </div>
}
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

.add {
  color: #fff;
  background-color: green;
}
.remove {
  color: #fff;
  background-color: red;
}
.checkout {
  font-weight: bold;
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Замена классов операторами в react чтобы исключить повторы кода

Ответы (1 шт):