在边栏中反应幻灯片

Question

我正在尝试使用 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.

Answer 1

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

变化：

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

至

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

如果没有输入错误：您在函数中将变量 mainStatus 声明为普通变量，而不是将其作为 prop 提供给 Main 组件。所以 this.props.mainStatus 将是未定义的。

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

在边栏中反应幻灯片

React Slide in Sidebar

css

sidebar

reactjs