主页 / 问题 / 1592603
Accepted
K CAMDEN
Asked:2024-09-02 14:23:04 +0000 UTC2024-09-02 14:23:04 +0000 UTC

在React中用运算符替换类以消除代码重复

  • 772

我正在尝试对不同类的按钮实现这样的替换 - 代码优化。它适用于一个人，但不适用于我，资源管理器不会进行替代，它只是在浏览器中添加条件。告诉我如何解决它？

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;

reactjs

1 个回答

  1. Best Answer

    告诉我如何解决它？

    例如，这样做...

    //
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>

    • 1

相关问题