puis-je utiliser l'opérateur ternaire dans className de div?

Question

Puis-je faire ce qui suit?

<div className={`${customerDetails.isCustomer} ? u-pb--sm : u-ph--sm u-pb--sm`}> 

Sinon quelle est la meilleure façon d'écrire cela?

Merci

Answer 1

Cela devrait fonctionner. Vérifiez customerDetails et essayez de console.log.

const CustomerDetails = ({ customerDetails }) => 
 
    <div className={customerDetails.isCustomer ? 'customer': 'notCustomer'}> 
 
    {`Customer: ${customerDetails.isCustomer}`} 
 
    </div> 
 

 
class App extends React.Component { 
 
    render() { 
 
    const customerDetails1 = { isCustomer: true } 
 
    const customerDetails2 = { isCustomer: false } 
 
    
 
    return (
 
     <div> 
 
     <CustomerDetails customerDetails={customerDetails1} /> 
 
     <CustomerDetails customerDetails={customerDetails2} /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('root') 
 
)

.customer { 
 
    background-color: green; 
 
    color: white; 
 
} 
 

 
.notCustomer { 
 
    background-color: red; 
 
    color: white; 
 
}

<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="root"></div>

Answer 2

Il fonctionne. Je l'utilise tout le temps. Comme d'autres l'ont demandé, à quoi ressemble votre fonction de rendu? La véritable façon d'appeler à nouveau la fonction de rendu (en intégrant les modifications dans votre DOM) utilise this.setState. Si vous utilisez un this.state.something comme booléen ternary, votre className sera mis à jour dynamiquement chaque fois que vous le modifiez en utilisant this.setState.