React Slide in Sidebar

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={mainStatus} id="main" > 

へ

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

それにはタイプミスではなかった場合： あなたはあなたの関数では、通常の変数として変数mainStatusを宣言しに小道具としてそれを与えていませんあなたのメインコンポーネント。したがってthis.props.mainStatusは未定義です。

Tipp：mainStatus変数は変更していません。不必要なバグを防ぐためにconstとして宣言することをお勧めします。詳細はこちらを参照してください。 https://softwareengineering.stackexchange.com/a/278653/282611