如果为true，则在JSX中设置属性else设置className

Question

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

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

如果只是关于classNames，我对这里的没有问题

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

但这导致了一个错误，我目前不知道如何做到这一点。

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

我之前也做过一些研究，但这对我没有帮助。React.js禁用按钮

有人能在这里给我指正确的方向吗？当true是属性，false是类名时，如果else，我该如何编写JSX简写？

提前感谢！

Answer 1

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

const isAccepted    = items.status === 'accepted';
const buttonClasses = isAccepted ? '<some class>' : '<another class>'
<button 
   className={ buttonClasses }
   disabled={ isAccepted }
>
  Button
</button>

Answer 2

class Example extends React.Component {
  render() {
    const disabled = true
    const className = true === 'declined' ? 'danger' : 'success'
    return (
      <button disabled={disabled} className={className}>
        Example
      </button>
    )
  }
}
ReactDOM.render(
  <Example />,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />