Если true set attribute else set className в JSX

Question

У меня есть кнопка в моем Компоненте, которая должна быть отключена, если статус элемента принят, в противном случае должен быть добавлен класс успешности начальной загрузки.

Проблема, с которой я сталкиваюсь, заключается в том, что disabled не является классомName, а не атрибутом, а bootstrap btn btn-success - это имя класса.

Если речь идет просто о именах классов у меня нет никаких проблем с этим, как здесь

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

Но это приводит к ошибке, и я не имею в настоящее время нет понятия, как сделать это.

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

Я также провел некоторое исследование ранее, но это не помогло мне. React.js Disable button

Может кто-нибудь указать мне в правильном направлении здесь? Как написать строчку JSX if-else, когда true является атрибутом и false - имя класса?

Заранее благодарен!

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