My App

使用 if 语句

使用 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;

没有规定我们的 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>;
}

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

猜一个,然后展开这一部分以查看答案: