React.forwardRef компоненты отображаются в DevTools в зависимости от того, как они названы. По умолчанию безымянные forwardRef компоненты показываются как "ForwardRef", что затрудняет отладку. Есть два основных способа улучшить читаемость.
Присвой описательное имя функции рендеринга, которую ты передаёшь в React.forwardRef:
const WrappedComponent = React.forwardRef(
function myFunction(props, ref) {
return <LogProps {...props} forwardedRef={ref} />;
}
);
Это будет отображаться как "ForwardRef(myFunction)" в DevTools, что сразу позволяет его идентифицировать.
Вручную присвой свойство displayName, чтобы получить более описательные идентификаторы:
function logProps(Component) {
function forwardRef(props, ref) {
return <LogProps {...props} forwardedRef={ref} />;
}
const name = Component.displayName || Component.name;
forwardRef.displayName = `logProps(${name})`;
return React.forwardRef(forwardRef);
}
Этот подход отображается как "ForwardRef(logProps(MyComponent))", давая чёткое представление о назначении компонента и его иерархии.
Используй именованные функции рендеринга для простых случаев и displayName для компонентов высшего порядка (HOC), которые оборачивают forwardRef. Это гарантирует, что DevTools корректно идентифицирует твои компоненты во время отладки и значительно упрощает навигацию по дереву компонентов.
По умолчанию безымянные компоненты React.forwardRef отображаются как ForwardRef в DevTools, что затрудняет идентификацию конкретных компонентов в дереве компонентов.
Новый — ещё не проверен сообществом
Вы