if-else文はJSX内で動作しません。 これは、JSXが単なる関数呼び出しとオブジェクト構文(construction)のためのシンタックスシュガーであるためです。 基本的な例を見てみましょう。

// このJSXを…
React.render(<div id="msg">Hello World!</div>, mountNode);

// JavaScriptに変換するとこのようになります。
React.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

これは、if文が適合しないことを意味します。 次の例を見て下さい。

// このJSXを…
<div id={if (condition) { 'msg' }}>Hello World!</div>

// JavaScriptに変換するとこのようになります。
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

これは正しいJavaScriptではありません。 あなたは、おそらく三項演算子を使用することを考えるでしょう。

React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

もし、三項演算子では不十分な場合は、 どのコンポーネントを使用するべきなのかをif文を使用して決定することも可能です。

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
)

JSXコンパイラを使って、これを試してみてください。

 Back to top