时间戳

首页 > 解决方案 > 如何根据 bool 值在反应应用程序中呈现信息？

javascript - 如何根据 bool 值在反应应用程序中呈现信息？

问题描述

我对反应和 js 很陌生，所以我在布尔逻辑方面遇到了麻烦。

所以我有一个函数 Profile，其中包含两个 const 方法，每个方法都返回不同的信息。

 function Profile(props) {

 const returnNormalProfile()

 const returnEditableProfile()

然后我有这个根据页面返回每个常量

 if (existsCookie) {

if(isInEditMode){
  return(
    <div>
      {returnNormalProfile()}
    </div>
  )
}else{
  return(
    <div>
      {returnEditableProfile()}
    </div>
  )
   }
} return NotLoggedIn
}

问：如何设置一个布尔变量，例如“isInEditMode”，然后根据它是否为真返回页面。

当前问题：我尝试执行 var isInEditMode = false 然后执行返回但不起作用。

当前功能设置为页面顶部有一个按钮，例如在每个页面中

    <form onSubmit={(b) => handleEdit(b)} style={{ textAlign: 'center' }}>
      <input type="submit" value="Done" />
    </form>

因此，当我返回 returnNormalProfile 时，它​​会调用此代码

    const handleEdit = () => {
        isInEditMode = true
     }

我能做些什么来完成这项工作？我见过人们使用 const [editMode, setEditMode] = useState(false)。但是，我不明白如何以这种方式使用它。

标签： javascriptreactjs

解决方案

你必须使用状态。isInEditMode必须是一个反应状态，当改变时会导致重新渲染并根据其值返回相应的 UI。使用声明isInEditMode为状态useState：

    const [isInEditMode,setIsInEditMode] = useState(false)

然后更新isInEditMode：

const handleEdit = () => {
        setIsInEditMode(true)
     }

推荐阅读