Question

我能做到以下几点吗？

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

如果不是最好的方式来写这个？

由于

Answer 1

那应该有用。检查property var ...并尝试customerDetails。

＆＃13;

console.log

＆＃13;

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')
)

＆＃13;

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

＆＃13;

Answer 2

有效。我用它所有的时间。正如其他人所问，你的渲染功能是什么样的？再次调用render函数（包含DOM中的更改）的真正方法是使用this.setState。如果您使用this.state.something作为三元布尔值，则每次使用this.setState更改时，className都会动态更新。

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

2 个答案: