Ни div, ни класса, ни каскада

Возьмём карточку «Жим лёжа» такой, какой она была бы в части IV: div.card, внутри заголовок h3, строка с числом подходов и кнопка, которая это число увеличивает. Классы — зацепки для CSS, как в доске задач из части II, где карточка была li.card с span.card-title и кнопкой button.card-del. Первый шаг переноса самый ленивый: вставить этот JSX в пример на React Native, ничего не меняя.

Прогноз: сколько ошибок покажет компилятор, сработает ли нажатие и какие теги окажутся под карточкой, под View и под кнопкой? Последнюю строку печатает hostTag — помощник из подложки: сам пример в DOM заглядывать не должен, почему — ниже.

declare function hostTag(testID: string): string | null;
const { View } = ReactNative;

function SetCard() {
  const [sets, setSets] = React.useState(2);
  console.log("рендер: подходов", sets);
  return (
    <div className="card" data-testid="card">
      <h3 className="card-title">Жим лёжа</h3>
      <p className="card-meta">Подходов: {sets}</p>
      <button className="card-add" data-testid="add" onClick={() => setSets(sets + 1)}>
        Записать подход
      </button>
      {/* для сравнения: настоящий примитив React Native среди HTML-тегов */}
      <View testID="rn-view" />
    </div>
  );
}

mount(<SetCard />);
setTimeout(() => fireEvent.press("add"), 100);
setTimeout(() => console.log(hostTag("card"), hostTag("rn-view"), hostTag("add")), 200);

Ни одной диагностики, нажатие сработало, а под всеми тремя — обычные теги HTML. Теги объявлены в самих типах React, в JSX.IntrinsicElements из пакета @types/react, и библиотека DOM для этого не нужна. Поэтому div с className компилятор считает законным JSX где угодно, в том числе рядом с View. А предпросмотр — это react-native-web поверх react-dom: View здесь сам становится div, и настоящий div рядом с ним ничем не хуже.

Помощник hostTag живёт в подложке, а не в примере, намеренно. Типы части V собраны без библиотеки DOM, потому что на телефоне DOM нет, и на строку с document компилятор ответит «Не удается найти имя "document". Вы хотите изменить целевую библиотеку? Попробуйте изменить параметр компилятора "lib", включив "dom"» — совет здесь как раз неуместный. Выполнится строка всё равно — предпросмотр стоит на настоящей странице, — а на телефоне упадёт с ReferenceError. Поэтому под предпросмотр мы заглядываем только через такие помощники и помним, что смотрим на веб, а не на телефон.

На телефоне DOM нет, и div там не значит ничего. Для каждого элемента со строковым типом рендерер React Native спрашивает конфигурацию нативного вида у реестра: в React Native 0.86 это getViewConfigForType в ReactFabric-dev.js, а сам реестр — Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js. RCTView, которым на телефоне рисуется View, в реестре есть, а div, h3 и button — нет, и реестр бросает исключение по шаблону «View config getter callback for component `%s` must be a function (received `%s`).%s». Для имени со строчной буквы он дописывает подсказку «Make sure to start component names with a capital letter.»

Это исключение посреди рендера, а не предупреждение: без границы ошибок React снимает всё дерево — так же, как в статье «Границы ошибок — единственное место, где ещё нужен класс». И назовёт сообщение не div. Нативные элементы создаются снизу вверх, от листьев к корню, поэтому первым рендерер споткнётся о h3. А ещё раньше, на самом листе, консоль пожалуется на строку «Жим лёжа»: над ней нет нативного Text, и для телефона она стоит вне текста — ровно та ошибка, которой посвящён следующий раздел.

Предпросмотр прощает HTML-теги потому, что сам сделан из HTML. Это первое место, где пример работает, а телефон — нет, но не последнее: следующая статья проведёт эту границу целиком.

Перенесём честно: div становится View, h3 и p — Text, button — Pressable. И почти каждый в первый раз делает одно и то же: надпись кнопки остаётся там, где стояла в <button>, — прямо внутри Pressable.

Прогноз: сколько диагностик у компилятора, сколько строк в консоли после двух нажатий и видна ли надпись «Записать подход» на экране примера?

const { View, Text, Pressable } = ReactNative;

function SetCard() {
  const [sets, setSets] = React.useState(2);
  console.log("рендер: подходов", sets);
  return (
    <View>
      <Text>Жим лёжа</Text>
      <Text>Подходов: {sets}</Text>
      <Pressable testID="add" onPress={() => setSets(sets + 1)}>
        Записать подход
      </Pressable>
    </View>
  );
}

mount(<SetCard />);
setTimeout(() => fireEvent.press("add"), 100);
setTimeout(() => fireEvent.press("add"), 200);

Компилятор снова промолчал, а консоль после каждого рендера печатает красную строку «Unexpected text node: Записать подход. A text node cannot be a child of a <View>.». Типы здесь бессильны по устройству. children у View и Pressable принимают React.ReactNode, а строка — законный ReactNode. Правило «строка — только в Text» говорит не о типе пропса, а о том, какой нативный вид окажется над строкой в готовом дереве, и типом пропса его не выразить.

Печатает эту строку react-native-web. Pressable рисует себя через View, а View в отладочной сборке перебирает своих детей и ругается на каждого, кто оказался строкой. Проверка стоит в рендере и повторяется на каждой отрисовке: три рендера — три строки, а в списке из сотни таких кнопок было бы по сотне за рендер. И она закрыта условием process.env.NODE_ENV !== "production": в песочницу учебника нарочно положена отладочная сборка, в веб-сборке вашего приложения этой строки не будет.

Надпись при этом на экране примера видна — и здесь предпросмотр врёт. В HTML текст внутри div законен, браузер его и нарисовал. На телефоне так не будет. Рендерер React Native 0.86 создаёт для строки текстовый узел и, не найдя над ним Text, пишет в отладочной сборке «Text strings must be rendered within a <Text> component.» — LogBox показывает это красной плашкой внизу экрана. А сама строка не появится: нативный узел сырого текста — не вид и в раскладке не участвует, собрать такие узлы в рисуемую строку умеет только нативный Text. В релизной сборке проверки нет вовсе, и кнопка молча остаётся без надписи.

// react-native-web 0.21.2, dist/exports/View/index.js
if (process.env.NODE_ENV !== "production") {
  React.Children.toArray(props.children).forEach((item) => {
    if (typeof item === "string") {
      console.error("Unexpected text node: " + item + ". A text node cannot be a child of a <View>.");
    }
  });
}

// react-native 0.86.0, Libraries/Renderer/implementations/ReactFabric-dev.js
function createTextInstance(text, rootContainerInstance, hostContext) {
  hostContext.isInAParentText ||
    console.error("Text strings must be rendered within a <Text> component.");
  // …дальше создаётся нативный узел RCTRawText
}

// ReactFabric-prod.js: в релизе createTextInstance ничего не проверяет, а контекст — один объект на всё дерево
var PROD_HOST_CONTEXT = { isInAParentText: !0 };

Проверим эту разницу на строках, которые попадают в View незаметно. Здесь пять таких мест. Прогноз: сколько красных строк напечатает пример и какой текст будет в каждой?

const { View, Text } = ReactNative;

interface LabelProps {
  children: React.ReactNode;
}

function Label({ children }: LabelProps) {
  return children;
}

function SetLine() {
  const weight = 60;
  const reps = 0;
  console.log("рендер");
  return (
    <View>
      <View>{weight} кг</View>
      <View>{reps}</View>
      <View><Label>отдых</Label></View>
      <View style={{ flexDirection: "row" }}>
        <Text>60 кг</Text> <Text>× 10</Text>
      </View>
      <View>{`${weight} кг`}</View>
    </View>
  );
}

mount(<SetLine />);

Три красные строки на пять ошибок. Первая — только « кг», без числа: JSX разрезал {weight} кг на двух детей, число 60 и строку " кг", а проверка смотрит лишь на строки. Поэтому одинокий {reps} прошёл молча. Вторая — одинокий пробел. JSX выбрасывает пробелы, в которых есть перевод строки, но пробел между двумя тегами на одной строке — полноправный ребёнок, и в ряду <Text>60 кг</Text> <Text>× 10</Text> он оказался прямо в View. Третья — шаблонная строка: она одна и целиком строка.

А <Label>отдых</Label> проверка не видит вовсе. Для View это элемент, и что он отрисует, станет известно позже, когда View уже проверил своих детей. Так же невидима строка во фрагменте <>отдых</> — мы проверили и это. На телефоне каждое из пяти мест даст ошибку, и ни одна из этих строк на экран не попадёт.

Поэтому правило проверяют глазами, а не консолью: у каждой строки и каждого числа ближайшим нативным предком должен быть Text. Смотрите на всё, что стоит между тегами View и Pressable: текст, пробел в одной строке с тегами, выражение в фигурных скобках, которое может дать строку или число. Всё это уходит в Text, а куски одной фразы — в один общий Text: внутри него JSX режет текст как угодно.

Ноль из условия sets && … — тот же одинокий номер. Что && отдаёт ноль и React его рисует, было в части IV, в статье «Выражения, условия и списки в разметке»; новое здесь другое: предпросмотр промолчит, а телефон — нет. Как с этим обходиться в стилях, разобрано в статье про StyleSheet.create.

Остался CSS. Класс переносить некуда: className у примитивов нет, стиль приезжает пропсом style — объектом, обычно из StyleSheet.create. Нет и каскада. Правило .card .card-title в CSS дотягивается до потомков, а селекторов в React Native нет вовсе: стиль действует ровно на тот элемент, которому передан, и имя title в листе стилей — просто ключ объекта. Что при этом наследуется, а что нет, разбирает вторая глава, статья «Каскада нет, наследования нет — кроме одного случая». Здесь перенесём сами правила так, как их переносит рука: имена в camelCase, значения как были.

Прогноз: сколько ошибок покажет компилятор и какое свойство, которого в React Native нет, он пропустит молча?

const { View, Text, StyleSheet } = ReactNative;

const styles = StyleSheet.create({
  card: {
    display: "grid",
    padding: "16px",
    margin: "0 auto",
    borderBottom: "1px solid #ddd",
  },
  title: {
    font: "600 18px/1.4 system-ui",
    textTransform: "uppercase",
  },
});

function Card() {
  console.log("рендер");
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Жим лёжа</Text>
    </View>
  );
}
mount(<Card />);

Четыре диагностики. display не бывает grid — только flex, none и contents. Единиц нет: "16px" не проходит, размеры здесь числа, и что это за единицы, разберёт вторая глава. margin принимает одно значение, а сокращения font нет совсем. Здесь настоящие типы работают на вас: почти каждая CSS-привычка упирается в компилятор. Три красные строки в консоли — проверка StyleSheet.create из react-native-web, о ней статья «StyleSheet.create: пишем свой, смотрим настоящий».

А про borderBottom компилятор промолчал, хотя такого свойства в React Native нет. Лишнее свойство объектного литерала он показывает, когда всё остальное в объекте сошлось с типом, а в card и так три ошибки. Исправьте их — и вместо четырёх диагностик останется одна, длинная, про весь аргумент StyleSheet.create, а borderBottom назван в самом её конце. Как это выглядит — во второй задаче.

Бывает и хуже — привычка, которую не заметит никто. В CSS line-height: 1.4 — множитель к размеру шрифта. В React Native lineHeight — абсолютная высота строки, и 1.4 — это 1,4 единицы, а не 1,4 размера шрифта. Число есть число: компилятор доволен, консоль молчит. Прогноз: какую line-height вычислит браузер для двух абзацев? Сравнивает их второй помощник подложки, hostStyle.

declare function hostStyle(testID: string, prop: string): string | null;
const { View, Text, StyleSheet } = ReactNative;

const styles = StyleSheet.create({
  fromCss: { fontSize: 18, lineHeight: 1.4 },
  inDp: { fontSize: 18, lineHeight: 25 },
});

const note = "Жим лёжа: три подхода по десять повторов, отдых девяносто секунд между подходами";

function Notes() {
  return (
    <View>
      <Text testID="css" style={styles.fromCss}>{note}</Text>
      <Text testID="dp" style={styles.inDp}>{note}</Text>
    </View>
  );
}

mount(<Notes />);
setTimeout(() => {
  console.log("lineHeight: 1.4 →", hostStyle("css", "line-height"));
  console.log("lineHeight: 25 →", hostStyle("dp", "line-height"));
}, 100);

Соберём карточку заново: текст — только в Text, надпись кнопки — тоже, стили — числами и длинными именами. Прогноз: сколько красных строк останется после нажатия?

const { View, Text, Pressable, StyleSheet } = ReactNative;

function SetCard() {
  const [sets, setSets] = React.useState(2);
  console.log("рендер: подходов", sets);
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Жим лёжа</Text>
      <Text style={styles.meta}>Подходов: {sets}</Text>
      <Pressable testID="add" style={styles.button} onPress={() => setSets(sets + 1)}>
        <Text style={styles.buttonText}>Записать подход</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, borderBottomWidth: 1, borderBottomColor: "#ddd" },
  title: { fontSize: 18, fontWeight: "600", lineHeight: 25, textTransform: "uppercase" },
  meta: { color: "#8a8594" },
  button: { marginTop: 8, padding: 12, borderRadius: 8, alignItems: "center", backgroundColor: "#2a2735" },
  buttonText: { color: "#fff" },
});

mount(<SetCard />);
setTimeout(() => fireEvent.press("add"), 100);

Ни одной — и ни одной диагностики. border-bottom: 1px solid #ddd распался на borderBottomWidth и borderBottomColor, font — на fontSize и fontWeight, line-height: 1.4 стал lineHeight: 25, а display: grid просто исчез: каждый View и так flex-контейнер, причём раскладывает колонкой. Чем эти умолчания отличаются от CSS, разберёт статья «Flex с другими умолчаниями».

У нижней половины таблицы есть сторож — компилятор, а у верхней нет. Самые дорогие ошибки переноса, теги и текст вне Text, живут там, где типы не помогают, а предпросмотр видит их частично или вовсе прощает. Где ещё он расходится с телефоном и как это проверить запуском, — следующая статья, «Что в этой песочнице настоящее».