编程语言
首页 > 编程语言> > javascript-如果设置为true,则在JSX中设置className

javascript-如果设置为true,则在JSX中设置className

作者:互联网

我的组件中有一个按钮,如果接受项目状态,则应禁用该按钮,否则应附加引导成功类.

我在这里面临的问题是,disabled不是className而是属性,bootstrap btn btn-success是className.

如果只是关于类名,我没有问题,就像这里

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

但这会导致错误,我目前不知道如何执行此操作.

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

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

有人可以在这里指出正确的方向吗?当true是一个属性而false是一个className时,如何编写JSX简写if-else?

提前致谢!

解决方法:

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

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

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

标签:jsx,reactjs,react-jsx,javascript
来源: https://codeday.me/bug/20191026/1939461.html