Почему условие if-else не работает при использовании в реакции jsx

Question

запись if-else в jsx при написании кода ответа не работает.

<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!" 
); 

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!"); 

Таким образом, вы см., если/else не подходит в этой модели. Лучше использовать его за пределами jsx. может быть в функции рендеринга.

Answer 3

Операторы if-else не работают внутри JSX. Это связано с тем, что JSX является просто синтаксическим сахаром для вызовов функций и построения объектов. React Docs