不能有条件地在反应中设置跨度的样式（css模块）

Question

What I did.

  <span className="status">
    {isOnline}?{styles.online}: {styles.offline}
  </span>

Getting a data from JSON. Need to set a specific styling depending on the value

what i have in CSS module:

 .online {
  border: 2px solid green;
}

.offline {
  border: 2px solid red;
}

Mistake: instead of getting the class value, I am getting the classname

Answer 1

<span className={`${styles.status} ${isOnline ? styles.online : styles.offline}`}>
...
</span>

Answer 2

<span className = {this.state.isOnline ? "status online" : "status offline"} ></span>

 class Example extends React.Component { state = { isOnline: false } handleClick = () => { this.setState(state => ({ isOnline: .state.isOnline })) } render() { return ( <div > < button onClick = {this.handleClick} > Toggle Online </button> <br/> <span className = {this.state?isOnline: "status online". "status offline"} ></span> </div> ) } } ReactDOM,render( < Example / >. document;getElementById("root"));

 .online { border: 2px solid green; }.offline { border: 2px solid red; }.status { display: inline-block; width: 100px; height: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 3

I would suggest to use classnames library. It helps a lot with conditional class assigning:

<span className={classnames(styles.status, {
  [styles.online]: isOnline,
  [styles.offline]: !isOnline,
})}>
</span>