逻辑运算符 ||不输出所有内容（JSX）

Question

据我了解，如果条件“mobileNumber”或“AuthUser”为真，则 ( ) 中的任何内容都应输出

<>
  {mobileNumber &&(
              <List.Item>
                  <Icon 
                  className="phone icon" 
                  />
                  <ListContent>
                      {mobileNumber}
                  </ListContent>
              </List.Item>
  )}
</>

以上正确输出所有内容

<>
  {mobileNumber || AuthUser(
              <List.Item>
                  <Icon 
                  className="phone icon" 
                  />
                  <ListContent>
                      {mobileNumber}
                  </ListContent>
              </List.Item>
  )}
</>

如果两者都为真，则在 ListContent 中输出 {mobileNumber}，但图标（似乎括号中的其他所有内容）都消失了

这是为什么？我可以修好吗？我在这里和互联网上进行了研究，一切都表明，如果其中任何一个为真，则输出括号中的内容。

Answer 1

你应该包装 or 表达式计算后跟 && 运算符，如 {( conditionA || conditionB ) && (<>your content</>):

{(mobileNumber || AuthUser) && (
              <List.Item>
                  <Icon 
                  className="phone icon" 
                  />
                  <ListContent>
                      {mobileNumber}
                  </ListContent>
              </List.Item>
  )}

逻辑运算符 ||不输出所有内容（JSX）

Logical operator || not outputting everything (JSX)

logical-operators

jsx

conditional-statements

reactjs