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

在编写react代码时在jsx中编写if-else不起作用

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

你好，世界！

然而，使用三元运算符是可行的

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

你好，世界！

为什么会发生这种情况？

您的JSX

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

它是有效的Javascript，可以由Javascript运行时环境进行解释/编译。如您所见，无法将

if-else

阻塞到该语句中，因为它无法编译为有效的Javascript

---

您可以改为使用，并传递从中返回的值：

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

//此JSX：
你好，世界！
//已转换为此JS：
createElement（“div”，{id:if（condition）{'msg'}}，“HelloWorld！”）；

因此，您可以看到if/else不适合此模型。最好在jsx之外使用它。

---

可能在render函数中。

如果else语句在JSX中不起作用。这是因为JSX只是函数调用和对象构造的语法糖。

---

因为

如果
不是右值？
<div id={(function () {
    if (condition) {
        return "msg";
    } else {
        return null;
    }
})()}>Hello World!</div>

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

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

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");