こんにちは、ともです。

React.jsのチュートリアルを見ながら勉強中でして、条件付きレンダリングについて書きたいと思います。

ボタンの状態によってコンポーネントの表示、非表示を制御するようにしてみたいと思います。

要素変数による表示・非表示

function Hello(props) {
            return (
                <p>
                    こんにちは！
                </p>
            )
        }

        class Greeting extends React.Component {
            constructor (props) {
                super(props)
                this.state = {showFlag : true}
            }

            render () {
                const showFlag = this.state.showFlag;
                // 表示フラグの場合はHello要素を格納
                let hello = showFlag ? <Hello/> : '';

                return (
                    <div>
                        {hello}
                        // ボタンのクリックに応じて表示・非表示フラグを変更
                        <button onClick={() => {this.setState({showFlag : !this.state.showFlag})}}>ボタン</button>
                    </div>
                )
            }
        }

        ReactDOM.render(
            <Greeting />,
            document.getElementById('root')
        )

ボタンをクリックすることにより表示・非表示のフラグを変更します。

表示フラグがtrueの場合は要素変数（<Hello />）を変数に格納しています。

このようにReact.jsではコンポーネントを変数に格納することが可能です。

論理 && 演算子によるインライン If

render () {
                const showFlag = this.state.showFlag;
                return (
                    <div>
                        {showFlag &&
                            <Hello />
                        }
                        <button onClick={() => {this.setState({showFlag : !this.state.showFlag})}}>ボタン</button>
                    </div>
                )
 }

このように記述するとshowFlagがtrueの場合のみ<Hello />が評価されるため条件分岐が可能となります。

まとめ

• 要素変数に格納し条件に応じて表示
• 比較演算子を利用して表示・非表示を切り替え

を行う方法について書きました。三項演算子も利用格納ですね。可読性や記述量からどれが良いか今後決めていきたいですね。