使用 if 语句

通过花括号，我们可以在 JSX 中添加 JavaScript 表达式。不过，不幸的是，我们无法添加 JavaScript 语句。

因此，这种行为是非法的：

function Friend({ name, isOnline }) {
  return (
    <li className="friend">
      {if (isOnline) {
        <div className="green-dot" />
      }}
 
      {name}
    </li>
  );
}

为什么这不起作用？好吧，让我们考虑这怎么编译成 JavaScript：

function Friend({ name, isOnline }) {
  return React.createElement(
    'li',
    { className: 'friend' },
    if (isOnline) {
      React.createElement('div', { className: 'green-dot' });
    },
    name
  );
}

问题是我们不能在像这样的函数调用中间放一个 if 语句——看一个更简单的例子，这等同于试图这样做：

console.log(
  if (isLoggedIn) {
    "Logged in!"
  } else {
    "Not logged in"
  }
)

不过好消息是：我们仍然可以使用一个 if 语句！但我们必须先将其提上来，使其不在 React.createElement 调用的中间：

import Friend from './Friend'

function App() {
  return (
    <ul className="friend-list">
      <Friend name="Andrew" isOnline={false} />
      <Friend name="Beatrice" isOnline={true} />
      <Friend name="Chen" isOnline={true} />
    </ul>
  )
}

export default App;

Open Sandbox

没有规定我们的 JSX 必须是 return 语句的一部分。我们可以在组件定义中的任何地方将 JSX 的一部分赋值给一个变量！

JSX 编译为：

function Friend({ name, isOnline }) {
  let prefix;
 
  if (isOnline) {
    prefix = React.createElement("div", { className: "green-dot" });
  }
 
  return React.createElement("li", { className: "friend" }, prefix, name);
}

在上面的代码中， prefix 要么会被赋值为一个 React 元素，要么根本不会被定义。这是可行的，因为 React 会忽略未定义的值。

Undefined 属性

考虑以下代码：

function Greeting() {
  let someClass;
 
  return <div className={someClass}>Hello World</div>;
}

你希望标记看起来是什么样的？

猜一个，然后展开这一部分以查看答案：

使用 if 语句

展开查看更多