爲什麼if-else條件在反應中不起作用jsx

Question

寫入if-else在jsx中寫入反應代碼不起作用。

​​

但是使用三元運算符工作。

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

爲什麼會發生這種情況？

Answer 1

你的

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

JSX是不是有效的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!" 
); 

Answer 2

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

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

所以，你看看這個模型是否適合這個模型。最好在jsx之外使用它。 可能在渲染功能。

Answer 3

if-else語句在JSX內部不起作用。這是因爲JSX只是函數調用和對象構造的語法糖。 React Docs