Нет имен компонентов в веб-отладке React Native

avatar
Nick Peterson
1 июля 2021 в 15:47
176
1
0

При попытке отладки React Native в веб-браузере я не вижу ни одного имени компонента. Будь то через стандартный браузер DevTools или расширение браузера React (Component), я не вижу никаких ссылок на имена компонентов или даже имена классов.

Имена компонентов запутаны с помощью View, Anonymous, Screen и т. д. в расширении React. Частично это то, как код написан с использованием компонентов React Native по умолчанию View и Screen. Но я ожидаю увидеть вложенные дочерние компоненты.

enter image description here

Класс CSS представлен в формате css-xyz123, по-видимому, не связанном с их реальными именами компонентов и классов.

enter image description here

Кто-нибудь знает, почему это происходит или как сделать имена компонентов видимыми для веб-отладки? Я рассмотрел несколько причин:

  • Как написаны компоненты (функциональные компоненты, часто обёрнутые наблюдателями Mobx)
  • Настройки компилятора Babel
  • Другие мини-игры или настройки сборки React Native

Спасибо!

Источник

Ответы (1)

avatar
bvaughn
2 июля 2021 в 17:29
0

Имя компонента вроде "Anonymous (ForwardRef)" означает, что ваш исходный код, вероятно, выглядит примерно так:

const Component = React.forwardRef((props, ref) => {...});

Функция, переданная forwardRef, является <51908555231609>анонимной функцией, поэтому у DevTools нет имени для чтения. (Обратите внимание, что это также верно для встроенных инструментов браузера.)

Чтобы "исправить" это, вы можете использовать именованную функцию. Есть два варианта:

const Component = React.forwardRef(function MyComponent(props, ref) {...});

Или:

const MyComponent = (props, ref) => {...};
const Component = React.forwardRef(MyComponent);
Nick Peterson
7 июля 2021 в 00:04
0

Спасибо за ответ и предложения, @bvaughn! Мне нравится идея с forwardRef и анонимными функциями. К сожалению, этот const Component = React.forwardRef не кажется виновником, поскольку я не использую forwardRef. Для справки, вот несколько примеров структур объявления компонентов, которые я часто использую. Пример 1, наблюдатель Mobxexport const MyComponentMemo = observer(function MyComponentMemo_({ etc }: MyComponentProps) { Пример 2, export const MyListView = ({ sort }: MyListViewProps) => { Пример 3, export const MyComponent = ({ prop1, prop2 }: MyComponentProps) => {