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

时间:2016-07-29 07:43:03

标签: javascript reactjs react-jsx jsx

我的Component中有一个按钮,如果接受了项目状态,则应禁用该按钮,否则应附加bootstrap成功类。

我面临的问题是,disabled不是className而不是属性,bootstrap btn btn-success是className。

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

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

但这会导致错误,我目前还不知道如何做到这一点。

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

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

有人能指出我在正确的方向吗?如果true是属性而false是类名,那么如何编写JSX速记if-else?

提前致谢!

2 个答案:

答案 0 :(得分:4)

您应该设置属性classNamedisabled

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

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

答案 1 :(得分:0)

&#13;
&#13;
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')
)
&#13;
<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" />
&#13;
&#13;
&#13;