[フロントエンド] React.jsのJSXで条件分岐を表現する方法（5つ） - YoheiM .NET

こんにちは、@yoheiMuneです。 Reactのお仕事をやっていて、日々試行錯誤してます。JSX内で条件分岐を表現する方法についてブログに書きたいと思います。 目次 何がしたいのか HTMLを出力するrenderメソッドで、この条件ならこのUI、別の条件なら別のUIを出したい、ということは良くあると思います。それをReact.jsではどのように表現するのかについて、ブログにまとめておきたいと思います。 JSX内で条件分岐を表現する5つの方法 よく使われる手法として、5つあります。状況に応じて必要なものを使えたら良いと思います。 方法1：即時関数を使う JSX内で即時関数を書き、その中で条件分岐を表現できます。 class Hello extends React.Component { render() { let isMorning = true return ( <div> {(()

[hujuu]

“&&条件”

[yoheiM]

[React] 条件分岐を表現する5つの方法