如何解决React没有呈现为状态值 当我将menuState设置为1或2时,它将返回菜单
我有一个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,那么我想返回 Menu ,否则返回 Not menu 。为了方便起见,我将menuState
初始化为10。它不返回任何值,无论是menu
还是not menu
。
当我将menuState
设置为1或2时,它将返回菜单。
state = {
menuState:1
}
解决方法
您的代码似乎没问题。您可以检查CSS的“菜单栏”
,第一个解决方案:
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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。