如果在JSX中設置了true屬性else set className

Question

我在Component中有一個按鈕，如果項目狀態被接受，應該禁用該按鈕，否則應該附加引導成功類。

問題我在這裏面臨的是，殘疾人不是一個className而不是一個屬性，bootstrap btn btn-success是一個className。

如果只是類名我有沒有問題，像這裏

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

但是，這會導致一個錯誤，我現在不知道該怎麼做。

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

我以前也做過一些研究，但那對我沒有幫助。 React.js Disable button

有人能指點我在這裏的正確方向嗎？我如何寫一個JSX速記if-else true是屬性，而false是一個className？

提前致謝！

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