为什么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