我可以在className的div中使用三元运算符吗？

Question

我可以做以下吗？

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

如果不是写这个的最好方法是什么？

谢谢

Answer 1

这应该工作。检查customerDetails并尝试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

它的工作原理。我用它所有的时间。正如其他人所问，你的渲染函数是什么样子的？再次调用渲染函数的真实方式（包含DOM中的更改）使用this.setState。如果您使用this.state.something作为三元布尔值，那么您每次使用this.setState对其进行更改时，您的className都会动态更新。