css - 在侧边栏中 react 幻灯片

我正在尝试使用React.JS在边栏中制作一张简单的幻灯片。
我要实现的功能是用主要内容组件覆盖侧栏组件。

我想我为此功能添加了必要的代码，但是它不起作用。如果有人可以看一下我的代码，那就太好了。

反应

class Sidebar extends React.Component {
render(){
return(
<div className="sidebar">
 <ul>
   <li>menu1</li>
   <li>menu2</li>
    </ul>
 </div>
)
 }
}

class Main extends React.Component {
constructor(props){
super(props);
this.state={
  isOpen: false
}
this.handleClick = this.handleClick.bind(this)
}

handleClick(){
this.setState({ isOpen : !this.state.isOpen})
console.log(!this.state.isOpen)
}
render(){
let mainStatus = this.state.isOpen ? "isopen" : "";
return(
<div className={this.props.mainStatus} id="main" >
    <button onClick={this.handleClick}>Click</button>
<div className="main">Main content</div>
</div>
)
}
}
 class App extends React.Component {
render(){
return(
<div className="container">
    <Sidebar />
    <Main />
</div>
 )
}
}

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

的CSS

.container {
display: flex;
}

/**** MAIN ****/
#main {
background-color: #900025;
}

#main.isopen {
left:0;
 background-color:#fff;
}

/**** SIDEBAR ****/
.sidebar {
background-color: #575777;
}

这是my codepen link。

最佳答案

看起来像一个简单的复制和粘贴错误。

更改：

<div className={this.props.mainStatus} id="main" >

至

<div className={mainStatus} id="main" >

如果没有输入错误：
您在函数中将变量mainStatus声明为普通变量，而不将其作为对主组件的支持。因此this.props.mainStatus将是未定义的。

提示：您不会更改mainStatus变量。我建议将其声明为const以防止不必要的错误，有关更多信息，请参见此：
https://softwareengineering.stackexchange.com/a/278653/282611