Reactでの条件分岐 4つの方法のメモ
9062 ワード
はじめに
Reactでの条件付きレンダリングの方法のメモです。
目次
- returnするJSXを分岐
- 変数にJSXを格納
- もう少し短く!!
- これで最後!!
- まとめ
1. returnするJSXを分岐
stateを条件に、判定してJSXをそのままreturnしてあげる方式
import React, { Component } from 'react'
export default class Greeting extends Component {
constructor(props) {
super(props);
this.state = {
isMorning: true
};
}
render() {
if (this.state.isMorning) {
return <h2> Good Morning Tom</h2>
} else {
return <h2> Hye ! Tom </h2>
}
}
}
2. 変数にJSXを格納
変数にJSXを格納することで、returnの箇所が1つになりました。
import React, { Component } from 'react'
export default class Greeting extends Component {
constructor(props) {
super(props);
this.state = {
isMorning: false
};
}
render() {
let message
if (this.state.isMorning) {
message = <h2> Good Morning Tom</h2>
} else {
message = <h2> Hye ! Tom </h2>
}
return <div>{message}</div>
}
}
3. もう少し短く!!
もう少し短く書けます
条件式 ? (trueの時) : (falseの時)
import React, { Component } from 'react'
export default class Greeting extends Component {
constructor(props) {
super(props);
this.state = {
isMorning: true
};
}
render() {
return (this.state.isMorning ?<h2> Good Morning Tom</h2> :<h2> Hye ! Tom </h2>)
}
}
4.これで最後!!
falseの時に、何も表示させない時とかは
条件式 && (trueの時)
みたいに書ける
条件式が評価されて、trueなら次に行くので
条件式がfalseなら次に行かずに何も返さない
import React, { Component } from 'react'
export default class Greeting extends Component {
constructor(props) {
super(props);
this.state = {
isMorning: true
};
}
render() {
return (this.state.isMorning && <h2> Good Morning Tom</h2>)
}
}
5. まとめ
4つのパターンを見ましたが、最後の2つがシンプルかなと思います。
ありがとうございました。
Author And Source
この問題について(Reactでの条件分岐 4つの方法のメモ), 我々は、より多くの情報をここで見つけました https://qiita.com/penpenta/items/4c03dae1fb3bf0b18a14著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .