Варианты рендеринга с JSX

frontend24 сентября 2019

В React есть несколько способов вывести список элементов. Наиболее популярный знаком, пожалуй, всем: использовать map.

import React from 'react';
import moment from 'moment';

const week = [0, 1, 2, 3, 4, 5, 6];

const renderWeekDays = locale =>
  week.map((day, i) => {
    const weekDay = moment().locale(locale).weekday(day).format('dd');

    return (
      <li
        key={`weekday-${weekDay}`}
        style={[styles.weekDay, (i === 5 || i === 6) && styles.weekDayWeekend]}
      >
        {weekDay.toUpperCase()}
      </li>
    );
  })
;

const CalendarStrip = ({ locale }) => <ul>{renderWeekDays(locale)}</ul>;

export { CalendarStrip };

Если принять во внимание, что при рендеринге вызывается функция, понимаем: можно изменять её как угодно, лишь бы она возвращала валидные JSX-элементы. Вот как выглядит обычный for вместо map:

const renderWeekDays = locale => {
  const week = [];

  for (let i = 0; i <= 6; i += 1) {
    const weekDay = moment().locale(locale).weekday(i).format('dd');

    week.push(
      <li
        key={`weekday-${weekDay}`}
        style={[styles.weekDay, (i === 5 || i === 6) && styles.weekDayWeekend]}
      >
        {weekDay.toUpperCase()}
      </li>,
    );
  }

  return week;
};

Условный рендеринг тоже может быть разным. Когда надо показывать в зависимости от состояния то один, то другой элемент, целесообразно взять тернарный оператор.

const dynamicComponent = isCorrect ? <ComponentOne /> : <ComponentTwo />;

В противном случае более читаемым код будет с оператором &&. Это доказывает пример со стилизацией компонента в зависимости от переданных ему props.

import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';

const styles = StyleSheet.create({
  // какие-нибудь стили
  wrapper: {...},
  round: {...},
  shadow: {...},
});

const Button = ({
  color,
  round,
  shadowed,
  children,
  onPress
}) => (
  <TouchableOpacity
    style={[
      styles.wrapper,
      { color },
      !!round && styles.round,
      !!shadowed && styles.shadow,
    ]}
    onPress={onPress}
  >
    {children}
  </TouchableOpacity>
);

export { Button };

// в дальнейшем используется как:
// <Button round color="#D3474B">
//   <Text>Hello</Text>
// </Button>

Да, здесь есть страшный и нечитаемый для многих оператор двойного отрицания !!. Исключительно для примера, чтобы показать его полезность в некоторых случаях и вообще напомнить о его существовании. !! принудительно приводит то, к чему его применили, к логическому типу — вот его польза. По сути это тоже самое, что Boolean(value), только короче. Страшен и нечитаем он лишь по незнанию. Применять или нет — вопрос стайлгайда конкретной компании, но в чужом коде встретиться такое может.

Динамические теги в React и VueКак сделать pull request