Réagir dans la barre latérale

Question

J'essaie de faire une simple glissière dans la barre latérale avec React.JS. La fonctionnalité que je souhaite mettre en œuvre consiste à couvrir le composant barre latérale avec le composant de contenu principal.

Je pense avoir ajouté le code nécessaire pour cette fonctionnalité mais cela ne fonctionne pas. Ce serait génial si quelqu'un pouvait regarder dans mon code .. merci d'avance.

React

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; 
} 

est ici my codepen link.

Answer 1

Cela ressemble à une simple erreur de copier-coller.

Change:

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

à

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

Dans le cas où il n'a commis aucune erreur de frappe: Vous déclarez la mainStatus variable comme variable normale dans votre fonction et ne donnant pas comme un accessoire à votre composant principal. Donc this.props.mainStatus sera indéfini. Tipp: Vous ne modifiez pas la variable mainStatus. Je recommande de le déclarer comme un const pour éviter les bugs inutiles, voir cela pour plus d'informations: https://softwareengineering.stackexchange.com/a/278653/282611