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

Question

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

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

如果只是关于class名字，我没有问题，就像这里

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

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

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

我之前也做过一些研究，但这对我没有帮助。

有人能给我指出正确的方向吗？当 true 是属性并且 false 是 className 时，如何编写 JSX shorthand 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>

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

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

If true set attribute else set className in JSX

javascript

jsx

reactjs

react-jsx