三元运算符中的条件不工作

Question

我正在尝试将 MUI 构建的自定义按钮添加到我的项目中。如果 2 个对象不为空，我想启用我的按钮，否则按钮将保持禁用状态。我编写的代码只能正确运行一半。

我只想在满足 2 个条件时启用我的按钮。但只有当一个条件满足条件时，按钮才会启用。三元运算不接受 && 条件。

我该如何解决这个问题？

{Object.keys(userSelectDevicename).length === 0 && Object.keys(userSelectDevicecategory).length === 0 ? (
  <>
    {" "}
    <WsButton type="submit" size="small" variant="contained" disabled={bool}>
      Add
    </WsButton>
  </>
) : (
  <>
    {" "}
    <WsButton type="submit" size="small" variant="contained" disabled={!bool}>
      Add
    </WsButton>
  </>
)};

Answer 1

在小括号内添加两个条件。 && 首先作为条件运算符工作，只有当 Object.keys(userSelectDevicename).length === 0 为真时才会首先检查它。它将运行下半场。那是来自 Object.keys(userSelectDevicecategory).length === 0) ? ....

的代码

加上括号时括号的优先级会更高，条件会被作为一个整体来评估，然后三元运算符会根据条件的结果开始。

 {(Object.keys(userSelectDevicename).length === 0 && Object.keys(userSelectDevicecategory).length === 0) ? (
                          <>
                            {" "}
                            <WsButton type="submit" size="small" variant="contained" disabled={bool}>
                              Add
                            </WsButton>
                          </>
                        ) : (
                          <>
                            {" "}
                            <WsButton type="submit" size="small" variant="contained" disabled={!bool}>
                              Add
                            </WsButton>
                          </>
                        )}

Answer 2

您在每种情况下都有两个相同的 JSX。变化因子为 disabled={!bool}。您可以为此使用三元运算符，但我会做一些不同的事情，如下所示。使代码更简洁。这是创建一个函数，该函数 returns 禁用按钮的布尔状态。

export default function YourComponent(){

   function getBool(){
      let lengthOne = Object.keys(userSelectDevicename).length
      let lenghtTwo = Object.keys(userSelectDevicecategory).length

      if(lengthOne === 0 && lengthTwo === 0) return true
      else return false
   }
     
   return(
      <>
       {" "}
       <WsButton type="submit" size="small" variant="contained" disabled={!getBool()}>
          Add
       </WsButton>
      </>
   ) 
}

三元运算符中的条件不工作

and condition in ternary operator not working

javascript

reactjs

material-ui