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。所以this.props.mainStatus将是未定义的。

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

边栏中的反应幻灯片

1 个答案: