If-else внутри jsx: ReactJS

Ответ 1

Согласно DOC:

операторы if-else не работают внутри JSX. Это потому, что 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 и поместить в jsx всю логику if-else, например так:

renderElement(){
   if(this.state.value == 'news')
      return <Text>data</Text>;
   return null;
}

render() {
    return (   
        <View style={styles.container}>
            { this.renderElement() }
        </View>
    )
}

Ответ 2

Мне это нравится, и он работает нормально.

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
  });
}

Ответ 3

Я нахожу этот способ самым приятным:

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

Ответ 4

Есть плагин Babel, который позволяет вам писать условные операторы внутри JSX без необходимости экранировать их с помощью JavaScript или писать класс-оболочку. Это называется JSX Control Statements:

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

Требуется немного настройки в зависимости от конфигурации Babel, но вам не нужно ничего импортировать, и у него есть все преимущества условного рендеринга, не выходя из JSX, что делает ваш код очень чистым.

Ответ 5

Вы можете это сделать. Просто не забудьте поставить "возврат" перед компонентом JSX.

Пример:

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>
    }
}

Ответ 6

Вы не можете указать условие if-else в возвратном блоке, используйте трехмерный блок, также this.state будет объектом, вы не должны сравнивать его со значением, посмотрите, какое значение состояния вы хотите check, а также возвращает возвращает только один элемент, обязательно оберните их в View

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

     )
}

Ответ 7

Обычно я делаю это:

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

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

Ответ 8

Для этого мы можем использовать троичный оператор или, если есть только одно условие, то "& amp;" Оператор. Как это: -

//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>
)

}

Ответ 9

А как насчет переключателя вместо if-else?

  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}
            />
        );
    }

Ответ 10

 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

Ответ 11

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

Для нескольких условий, как указано выше, проверьте код, указанный ниже,

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

}
);}