React { }里面可以用if语句吗？

问题描述

通常我们在 React 中配合使用 JSX ，它是一个 JavaScript 的语法扩展。在 JSX 语法中，可以在大括号内放置任何有效的 JavaScript 表达式。那么大括号{ }中可以使用 if 语句吗？

答案解释

答案是否定的。

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。

而 if 条件判断是一个语句，它不能用于大括号中。那么表达式和语句有什么区别呢？
简单地来说，**表达式是一个值，而语句是一个行为。**语句有可能会有值，比如 return true; ，也有可能没有值，比如 console.log("Good good study, day day up.");，就是一个单纯的在控制台输出的行为，没有值。而放进大括号里面的内容需要有值，才能在浏览器中渲染出来。而浏览器不能事先判断确保你的每一个逻辑控制流都有返回值，因此禁止 if 等语句的使用。

解决方案

那么的确需要使用 if 进行条件判断，在不同的逻辑控制流中渲染不同的内容，要怎么做呢？
可以使用以下两种方法来代替 if / else 在 { } 中使用：
1.三元表达式

condition ? expr1 : expr2;

在 condition 条件满足时，执行 expr1 表达式，否则执行 expr2。
以下是一个示例（来源：条件渲染—— React）

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

2.逻辑运算符 && 和 ||
利用了逻辑运算符的短路原则
（1）&&
true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。因此，如果条件是 true，&& 右侧的元素就会被渲染；如果是 false，React 会忽略并跳过它。
（2）||
true || expression 总是会返回 true，而 false || expression 总是会返回 expression。因此，如果条件是 true，React 会忽略并跳过它；如果是 false，|| 右侧的元素就会被渲染。
以下是一个示例（来源同上）

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}