react jsxで使用中にif-else条件が機能しない理由

Question

反応コードの書き込み中にif-elseをjsxで書き込むと、反応コードが機能しません。

​​

ただし、3値演算子を使用します。

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

なぜこのようなことが起こりますか？ 、の準備ができが有効なJavaScriptで

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

：自身でない有効Javascriptをある

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

の

Answer 1

あなたのJSXは、呼び出し以下ReactJSにコンパイルされますJavascriptランタイム環境で解釈/コンパイルされます。ご覧のとおり、有効なJavascriptにコンパイルできないため、if-elseをそのステートメントに詰め込む方法はありません。あなたは、そう

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

：

---

代わりimmediately-invoked function expressionを使用して内から返された値渡すことができます。以下の有効なJavaScriptにコンパイルされます

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

をif/elseがこのモデルに適合していないかを見てください。 jsxの外で使う方が良い。 がレンダリング機能に含まれている可能性があります。

Answer 3

if-elseステートメントがJSX内で動作しません。これは、JSXは関数呼び出しとオブジェクト構築のための文法的な砂糖に過ぎないからです。 React Docs