Условия в рендеринге React Native компонент

Иногда, в зависимости от условий, вам необходимо выполнить различные действия или представить конкретное отображение. Для этого вам потребуется использовать условные выражения.

Для тех, кто не знает, что такое условные выражения:

if (year > 2017){
    console.log("It is too yearly!") 
} else {
    console.log("Yeah, it is time now!") 
}

Для разработчиков, имеющих опыт работы с React или React Native, решение проблемы с условными выражениями при рендеринге может быть очевидным, но тем кто ранее не сталкивался с миром JSX это может оказаться не столь очевидным.

Как вы уже знаете, React Native использует JSX, который является расширением синтаксиса JavaScript. Это расширение синтаксиса будет преобразовано в обычные объекты JS во время компиляции. Чтобы понять, как использовать условные выражения в функции рендеринга компонентов, давайте сначала рассмотрим, что такое JSX и как вы его используете.

class ItemViewComponent extends React.Component{
    render(){
        return (
            <View>
                <Text> Hello, JSX! </Text>
            </View>
        );
    }
}

ItemViewComponent - это простой компонент, который выводит «Hello, JSX!» На экран. Теперь, чтобы увидеть, что такое синтаксис JSX, мы назначим этот текст переменной, а затем используем эту переменную для вывода сообщения на экран:

class ItemViewComponent extends React.Component{
    render(){
        const helloMessage = 'Hello, JSX!';
        return (
            <View>
                <Text>{helloMessage}</Text>
            </View>
        );
    }
}

У нас есть константная переменная helloMessage, которая заключена в фигурные скобки и встроена в JSX. Таким способом вы можете встроить любой код JavaScript в JSX.

Теперь переменной мы присвоим не строку а целое выражение JSX:

class ItemViewComponent extends React.Component {
    render() {
        const helloMessage = <Text> Hello, JSX! </Text>;
        return (
            <View>
                {helloMessage}
            </View>
        );
    }
}

Как вы можете видеть, JSX позволяет повторно использовать и встраивать любые переменные в представление. Как я уже говорил ранее, JSX преобразуется в обычный JavaScript во время компиляции. Итак, следующий фрагмент

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

будет преобразован в:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Теперь, когда мы знаем, что React-Native использует JSX, мы можем подумать о том, как использовать условные операторы для отображения того или иного представления. Рассмотрим следующий компонент в качестве примера:

class ItemViewComponent extends React.Component {
    render() {
        const helloMessage = <Text> Hello, JSX! </Text>;
        const goodbyeMessage = <Text> Goodbye, JSX! </Text>;
        return (
            <View>
                {helloMessage}
            </View>
        );
    }
}

Наше условие - отображать helloMessage, если this.props.isGreeting имеет значение true, или goodbyeMessage в противном случае.

Подход 1: использовать тернарные выражения

class ItemViewComponent extends React.Component {
    render() {
        const helloMessage = <Text> Hello, JSX! </Text>;
        const goodbyeMessage = <Text> Goodbye, JSX! </Text>;
        return (
            <View>
                {this.props.isGreeting ? helloMessage : goodbyeMessage}
            </View>
        );
    }
}

Подход 2: присвоить представление значению и вернуть его

class ItemViewComponent extends React.Component {
    render() {
        const helloMessage = <Text> Hello, JSX! </Text>;
        const goodbyeMessage = <Text> Goodbye, JSX! </Text>;

        let message;
        if (this.props.isGreeting) {
            message = helloMessage
        } else {
            message = goodbyeMessage
        }

        return (<View>{message}</View>);
    }
}

Подход 3: создайте отдельную функцию и делегируйте логику этой функции

class ItemViewComponent extends React.Component {
    render() {
        return ( <View> {this.displayJsxMessage()} </View> );
    }
                
    displayJsxMessage() {
        if (this.props.isGreeting) {
            return <Text> Hello, JSX! </Text>;
        } else {
            return <Text> Goodbye, JSX! </Text>;
        }
    }
}

Какой вариант использовать, полностью зависит от разработчика, так как пока нет лучших рекомендаций. Но помните, что ваш код должен быть максимально читаем.