动态更改jsx元素中的className

Question

我希望在更改pros.show的值时(简单地说，它给出true或false(，然后动态地将class添加到元素中。我如何使用sideDrawer方法来完成此操作？

import React, { Component } from 'react';
import './SideDrawer.css';
class SideDrawer extends Component {
state = {  }
constructor(props) {
super(props)
}
sideDrawer = () => {
let drawerClasses = ['side-drawer'];
if(this.props.show) {
drawerClasses.push('open');
}
return drawerClasses.join(" ");
};

render() { 
return ( 
<nav className={this.sideDarwer}>
<ul>
<li><a href="/">Check Paper</a></li>
<li><a href="/">Add Paper</a></li>
<li><a href="/">Modify Paper</a></li>
</ul>
</nav>
);
}
}
export default SideDrawer;

Answer 1

---

<nav className={`side-drawer ${this.props.show && 'open'}`}>