React 未呈现为状态值

Question

我有一个 React 组件，我想在其中进行条件渲染。

代码：

import React from "react";
import "./style/style.css";
class Menu  extends React.Component{
    state = {
        menuState:10
    }
    render(){
        console.log(this.state.menuState)
        if(this.state.menuState === 1 || this.state.menuState === 2)
            return <div className="menu">
                <h1>Menu </h1>
            </div>

        return <div className="menu-bar">
            <h1>Not menu</h1>
        </div>
    }
}
export default Menu;

正如您在这段代码中看到的，如果 menuState 是 1 或 2 那么我想 return Menu 否则 Not菜单。为了方便起见，我将 menuState 初始化为 10。它 return 什么都不是，menu 或 not menu。

当我将 `menuState` 设置为 1 或 2 时，它会 returns 菜单。

state = {
        menuState:1
    }

Answer 1

您的代码似乎没问题。您可以在 css 中检查“menu-bar”

Answer 2

第一个解决方案：

import React from "react";
import "./style/style.css";

class Menu  extends React.Component{
    state = {
        menuState:10
    }
render(){
    console.log(this.state.menuState)
    return(
        <div>
           {(this.state.menuState === 1 || this.state.menuState === 2) ? <h1>Menu </h1> : <h1>Not menu</h1>}
        </div>
        
      )
    }
  }
 export default Menu;

第二种解决方案：

import React from "react";
import "./style/style.css";

class Menu  extends React.Component{
  state = {
    menuState:1
  }

_conditional(){
    if(this.state.menuState === 1 || this.state.menuState === 2)
        return <div className="menu">
            <h1>Menu </h1>
        </div>

    return <div className="menu-bar">
        <h1>Not menu</h1>
    </div>
}

render(){
    console.log(this.state.menuState)
    return(
        <div>
            {this._conditional()}
        </div>
        
    )
   }
 }
export default Menu;

React 未呈现为状态值

React is not rendering as state value

state

rendering

reactjs

代码：

当我将 `menuState` 设置为 1 或 2 时，它会 returns 菜单。

React 未呈现为状态值

React is not rendering as state value

state

rendering

reactjs

代码：

当我将 menuState 设置为 1 或 2 时，它会 returns 菜单。

当我将 `menuState` 设置为 1 或 2 时，它会 returns 菜单。