javascript - 为什么在 react jsx 中使用时 if-else 条件不起作用

Question

在编写 React 代码时在 jsx 中编写 if-else 是行不通的。

<div id={if (condition) { 'msg' }}>Hello World!</div>

但是使用三元运算符是可行的。

<div id={condition ? 'msg' : null}>Hello World!</div>

为什么会这样？

Answer 1

你的 JSX 的

<div id={condition ? 'msg' : null}>Hello World!</div>

它本身不是有效的 Javascript，将被编译成以下 ReactJS 调用:

React.createElement(
  'div',                            // Element "tag" name.
  { id: condition ? 'msg' : null }, // Properties object.
  'Hello World!'                    // Element contents.
);

哪个是有效的 Javascript，准备好由您的 Javascript 运行时环境解释/编译。如您所见，无法将 if-else 插入该语句，因为它无法编译成有效的 Javascript。

---

您可以改用 immediately-invoked function expression并传递从内部返回的值:

<div id={(function () {
    if (condition) {
        return "msg";
    } else {
        return null;
    }
})()}>Hello World!</div>

它将编译成以下有效的 Javascript:

React.createElement(
    "div",
    {
        id: (function () {
            if (condition) {
                return "msg";
            } else {
                return null;
            }
        })()
    },
    "Hello World!"
);