[解決済み] jsxの中のif-else文。ReactJS
2022-12-08 17:57:13
質問
レンダリング関数を変更し、特定の状態が与えられたときに、いくつかのサブレンダリング関数を実行する必要があります。
例えば
render() {
return (
<View style={styles.container}>
if (this.state == 'news'){
return (
<Text>data</Text>
)
}
</View>
)
}
シーンを変更せずに、タブを使用して動的にコンテンツを変更することを実装するには、どうすればよいでしょうか。
どのように解決するのですか?
以下の通りです。 DOC :
JSXの内部ではif-else文は機能しません。これは、JSXが単なる は関数呼び出しとオブジェクト構築のための構文解析に過ぎないからです。
基本的なルールです。
<ブロッククオートJSXは基本的に 構文解析 . コンパイル後、JSX式は通常のJavaScript関数呼び出しとなり、JavaScriptオブジェクトに評価されます。私たちは任意の JavaScript式 を中括弧で囲んでJSXに埋め込むことができます。
しかし、文ではなく式だけです。つまり、直接的にはどんな文も置くことができません ( if-else/switch/for ) を入れることはできません。 JSX .
要素を条件付きでレンダリングしたい場合は
ternary operator
を使用します。
render() {
return (
<View style={styles.container}>
{this.state.value == 'news'? <Text>data</Text>: null }
</View>
)
}
もう一つの方法は
jsx
から関数を呼び出し、すべての
if-else
のロジックをその中に入れて、このようにします。
renderElement(){
if(this.state.value == 'news')
return <Text>data</Text>;
return null;
}
render() {
return (
<View style={styles.container}>
{ this.renderElement() }
</View>
)
}
関連
-
[解決済み] ループ内のJavaScriptクロージャ - シンプルな実用例
-
[解決済み] コールバック内で正しい `this` にアクセスする方法
-
[解決済み] React JSX内のループ
-
[解決済み] JavaScriptで複数ケースを扱うSwitch文
-
[解決済み] setStateを呼び出さずにReactコンポーネントを強制的に再レンダリングすることは可能ですか?
-
[解決済み] ReactJSでコンポーネントがtext型の非制御入力を制御エラーに変更する場合
-
[解決済み] React JSX: selecting "selected" on selected <select> option
-
[解決済み] ReactJS - .JSと.JSXの比較
-
[解決済み】ReactJS - "setState "が呼ばれるたびにrenderが呼び出されるのですか?
-
[解決済み】ReactJSでHTMLの文字列をJSXに変換する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる