web-dev-qa-db-ja.com

jsx内のif-elseステートメント：ReactJS

特定の状態が与えられたときにレンダリング関数を変更し、サブレンダリング関数を実行する必要があります。

例えば：

render() {
    return (   
        <View style={styles.container}>
            if (this.state == 'news'){
                return (
                    <Text>data</Text>
                )
            }
        </View>
    )
}

シーンを変更せずにそれを実装するには、タブを使用してコンテンツを動的に変更します。

javascriptreactjsreact-native
32
user8026867

DOC：

if-elseステートメントはJSX内では機能しません。これは、JSXが関数呼び出しとオブジェクト構築のための単なる構文上の糖だからです。

基本ルール：

JSXは基本的に 構文糖 です。コンパイル後、JSX式は通常のJavaScript関数呼び出しになり、JavaScriptオブジェクトに評価されます。 JavaScript式 は、中括弧で囲むことでJSXに埋め込むことができます。

ただし、ステートメントではなく式のみが、 JSX 内にステートメント（if-else/switch/for）を直接配置できないことを意味します。

要素を条件付きでレンダリングする場合は、次のように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>
    )
}
68
Mayank Shukla

私はこれが好きで、うまく機能しています。

constructor() {
   super();

   this.state ={
     status:true
   }
}

render() {
   return( 

     { this.state.status === true ?
           <TouchableHighlight onPress={()=>this.hideView()}>
             <View style={styles.optionView}>
               <Text>Ok Fine :)</Text>
             </View>
          </TouchableHighlight>
           :
           <Text>Ok Fine.</Text>
     }
  );
}

hideView(){
  this.setState({
    home:!this.state.status
  });
}
9
Manish

私はこの方法が最もいいと思います：

{this.state.yourVariable === 'news' && <Text>{data}<Text/>}
7
sooper

JavaScriptを使用してエスケープしたり、ラッパークラスを記述したりすることなく、JSX内に条件ステートメントを記述できるBabelプラグインがあります。 JSX制御ステートメント ：

<View style={styles.container}>
  <If condition={ this.state == 'news' }>
    <Text>data</Text>
  </If>
</View>

Babelの設定に応じて少しセットアップする必要がありますが、インポートする必要はなく、JSXを離れることなく条件付きレンダリングのすべての利点があり、コードが非常にきれいに見えます。

2
Chase Sandmann

あなたはこれを行うことができます。 JSXコンポーネントの前に「return」を置くことを忘れないでください。

例：

render() {
    if(this.state.page === 'news') {
        return <Text>This is news page</Text>;
    } else {
        return <Text>This is another page</Text>;
    }
}

インターネットからデータを取得する例：

import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native';

export default class Test extends Component {
    constructor(props) {
        super(props);

        this.state = {
            bodyText: ''
        }
    }

    fetchData() {
        fetch('https://example.com').then((resp) => {
            this.setState({
                bodyText: resp._bodyText
            });
        });
    }

    componentDidMount() {
        this.fetchData();
    }

    render() {
        return <View style={{ flex: 1 }}>
            <Text>{this.state.bodyText}</Text>
        </View>
    }
}
1
Jagjot Singh
 render() {
     return (   
         <View style={styles.container}>
         (() => {                                                       
             if (this.state == 'news') {
                return  <Text>data</Text>
            }
            else 
             return  <Text></Text>
        })()
         </View>
     )
 }

https://react-cn.github.io/react/tips/if-else-in-JSX.html

0
user193679

通常、私はこれを行います：

_renderNews () {
  if (this.state.page === 'news') {
    return <Text>{data}</Text>
  }
  return null
}

render () {
  return (
    <View>{this._renderNews}</View>
  )
}
0
Diego Mello

if-elseの代わりにswitch caseについて

  render() {
    switch (this.state.route) {
      case 'loginRoute':
        return (
            <Login changeRoute={this.changeRoute}
              changeName={this.changeName}
              changeRole={this.changeRole} />
        );
      case 'adminRoute':
        return (
            <DashboardAdmin
              role={this.state.role}
              name={this.state.name}
              changeRoute={this.changeRoute}
            />
        );
    }
0
Viraj Singh

これには、三項演算子を使用するか、条件が1つしかない場合は「&&」演算子を使用します。

//This is for if else

render() {

return (   
    <View style={styles.container}>
      {this.state == 'news') ?
           <Text>data</Text>
        : null}
    </View>
)

}

//This is only for if or only for one condition

render() {

return (   
    <View style={styles.container}>
      {this.state == 'news') &&
           <Text>data</Text>
        }
    </View>
)

}

0
sneha
if(condition1){ image1
}esleif(condition2){ image2
}else{ image3
}

上記のような複数の条件については、下記のコードを確認してください。

render(){
return(
{
       (condition1)?
       <Image source={require('')}/>:
       (condition2)?
       <Image source={require('')}/>:
       <Image source={require('')}/>:

}
);}
0
Abdul Karim Khan

戻りブロックにif-else条件を指定すること、三項ブロックを使用すること、this.stateがオブジェクトになること、値と比較すること、チェックする状態値を確認すること、およびreturnは1つの要素のみを返します。必ずそれらをビューでラップしてください

render() {
    return (
      <View style={styles.container}>
      {this.state.page === 'news'? <Text>data</Text>: null}
      </View>

     )
}
0
Shubham Khatri