JSX Reactこれだけは覚えておきたい便利な条件分岐

表示と条件分岐

異なる表示（レンダリング）を条件文で制御したいことありますよね。

例えば、ログインしている人とログインしていない人に異なる表示を行いたい。

そんな時のことを書いていきます。

？テクニック

ボタンを押すとメッセージを表示し、もう一度押すと消すようなアプリを作る。

toggleVisibility はアロー関数で、buttonが押される(onClick)されると起動します。

<button onClick={toggleVisibility}>

のところがボタンです。クリックされるとtoggleVisibilityというアロー関数に処理が飛びます。

visibility = !visibility;によって押される度に真偽が反転し、再表示render()します。その際に、 {visibility ? 'Hide details' : 'Show details'}によって、visibilityが真であれば、Hide detailsが表示され、偽であれば、Show detailsが表示されます。

let visibility = false;

const toggleVisibility = () => {
  visibility = !visibility;
  render();
};

const render = () => {
  const jsx = (
    <div>
      <h1>Visibility Toggle</h1>
      <button onClick={toggleVisibility}>
        {visibility ? 'Hide details' : 'Show details'}
      </button>
      {visibility && (
        <div>
          <p>Hey. These are some details you can now see!</p>
        </div>
      )}
    </div>
  );

  ReactDOM.render(jsx, document.getElementById('app'));
};
render();

&&テクニック

サブタイトルがあれば表示するという感じにしたい時、

&&を使うと便利です。

{app.subtitle && <p>{app.subtitle}</p>}

app.subtitleが設定されていれば（app.subtitleがnullなら偽になる）、pタグ以下が表示されるというプログラムになっています。
真偽を使っているだけですが、よく使います。

<p>{(app.options.length > 0) ? 'Here are your options' : 'No options'}</p>

オプションが１つ以上あれば、 'Here are your options'となり、無ければ(app.options.length=0)、 'No options'が表示されます。

console.log('App.js is running!');
const app = {
title:'Indecision App',
subtitle:'Put your life in the hands of a computer',
options: ['One', 'Two']
};
const template = (
<div>
<h1>{app.title}</h1>
{app.subtitle && <p>{app.subtitle}</p>}
<p>{(app.options.length > 0) ? 'Here are your options' : 'No options'}</p>
<ol>
<li>Item one</li>
<li>Item two</li>
</ol>
</div>
);
const user = {
name:'Andrew',
age:26,
location:'Philadelfia'
};
function getLocation(location) {
if(location) {
return<p>Location: {location}</p>;
} else {
return'Unknown';
}
}
const templateTwo = (
<div>
<h1>{user.name ? user.name : 'Anonymous'}</h1>
{(user.age && user.age >= 18) && <p> Age: {user.age}</p>}
{getLocation(user.location)}
</div>
);
const appRoot = document.getElementById('app');
ReactDOM.render(templateTwo, appRoot);

この解説はオンライン学習サイトUdemy（ユーデミー）のThe Complete React Web Developer Course (2nd)で学んだことをまとめています。