trueの場合はJSXのclassNameを設定します

Question

私のコンポーネントにはボタンがあります。アイテムステータスが受け入れられると無効にする必要があります。それ以外の場合は、ブートストラップ成功クラスを追加する必要があります。

問題ここで私は、無効になっているのは属性ではなくclassNameであり、ブートストラップbtn btn-successはclassNameであるということです。

それはクラス名についてだけであるならば、私はここに

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

のようなもので問題ありません。しかし、これはエラーになり、私は現在、それをする方法を見当もつかない。

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

私は以前にいくつかの研究を行ったことがありますが、それは私を助けませんでした。 React.js Disable button

誰かが正しい方向に私を向けることができますか？ trueが属性で、falseがclassNameの場合、JSXの略語を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" />