Wenn True Set-Attribut else set Klassenname in JSX

Question

Ich habe eine Schaltfläche in meiner Komponente, die deaktiviert werden sollte, wenn der Artikelstatus akzeptiert wird, andernfalls Bootstrap Erfolgsklasse sollte angehängt werden.

Das Problem, mit dem ich hier konfrontiert ist, ist, dass deaktiviert ist kein Klassenname und kein Attribut und Bootstrap btn btn-success ist ein Klassenname.

Wenn es nur über Klassennamen ist habe ich keine Probleme mit, dass wie hier

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

Aber dies führt zu einem Fehler, und ich habe noch keine Ahnung, wie das zu tun.

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

Ich habe auch schon einige Recherchen gemacht, aber das hat mir nicht geholfen. React.js Disable button

Kann mir hier jemand in die richtige Richtung zeigen? Wie kann ich eine JSX-Kurzschrift schreiben, wenn-sonst, wenn true ein Attribut und false ein Klassenname ist?

Vielen Dank im Voraus!

Answer 1

sollten Sie legen beide Attribute className und 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" />