javascript - 如果 true 设置属性，否则在 JSX 中设置 className

Question

我的组件中有一个按钮，如果项目状态被接受，则应禁用该按钮，否则应附加 Bootstrap 成功类。

我在这里面临的问题是 disabled 不是类名而不是属性， Bootstrap btn btn-success 是类名。

如果它只是关于 classNames 我没有问题像这里一样

className={items.status === 'declined' ? 'danger' : 'success'}>

但这会导致错误，我目前不知道该怎么做。

 {items.status === 'accepted' ? 'disabled' : 'className=btn btn-success'}

我之前也做过一些研究，但这对我没有帮助。 React.js Disable button

有人能给我指出正确的方向吗？当 true 是一个属性而 false 是一个类名时，如何编写 JSX 简写 if-else？

提前致谢!

Answer 1

您应该同时设置属性 className 和 disabled

const isAccepted    = items.status === 'accepted';
const buttonClasses = isAccepted ? '<some class>' : '<another class>'

<button 
   className={ buttonClasses }
   disabled={ isAccepted }
>
  Button
</button>