Ошибка React: Element type is invalid в компоненте About
Быстрый ответ
import CorrectName from './MyComponent'; // Для экспорта по умолчанию
import { CorrectName } from './MyComponent'; // Для именованного экспорта
// Ваш компонент в действии
<CorrectName />
Проверьте соответствие импорта экспортам: обычно используется синтаксис import CorrectName from './MyComponent';
для модулей, экспортируемых по умолчанию, или import { CorrectName } from './MyComponent';
для именованных экспортов.При этом всегда удостоверьтесь в том, как устроен экспорт в исходном файле.
Практика использования импорта/экспорта в React
Ошибку "Неверный тип элемента" можно интерпретировать как индикатор неправильной обработки импортов и экспортов. Если фигурные скобки стоят на неправильном месте, значит, использован некорректный синтаксис импорта, что может привести к появлению проблем.
Экспорт по умолчанию (одна сущность, помеченная как export default
) не требует фигурных скобок при импорте:
// Экспорт 'About' как default
import About from './About';
// Использование компонента 'About'
<About />
Если из модуля экспортируются несколько элементов (именованный экспорт), испольуйте фигурные скобки, чтобы выбрать нужные:
// Импорт нескольких компонентов из модуля 'InfoComponents'
import { About, Contact } from './InfoComponents';
// Использование компонентов 'About' и 'Contact'
<About />
<Contact />
Правильное использование компонентов React
Неправильный импорт компонентов React или библиотек вроде material-ui
может быть сравнен с надеванием смокинга для похода на пляж. Вот что могло бы вам помочь:
В случае с Material-UI: следуйте требованиям библиотеки к синтаксису импорта.
JSСкопировать код// Material-UI использует экспорт по умолчанию import Button from '@material-ui/core/Button';
Использование require в качестве "застежки-крючка": Это поможет временно обойти проблемы при работе с экспортом по умолчанию.
JSСкопировать код// Использование 'About' через require const About = require('./About').default;
Помощь в отладке: ошибка неверного типа элемента
Для отладки ошибки "Неверный тип элемента" можно использовать следующий набор правил:
- Приведите в соответствие синтаксис операторов импорта и экспорта.
- Выясните, как настроен ваш компонент: используете вы 'React.createClass' или класс ES6?
- Уточните путь перед импортом модуля.
- Проверьте, не создает ли родительский компонент препятствий для вашего компонента.
- Обеспечьте актуальность версий библиотек и зависимостей.
React Router: специфика использования
При работе с React Router используйте особый синтаксис импорта:
// Импорт 'Link' из react-router-dom
import { Link } from 'react-router-dom';
<Link to="/about">About</Link>
Это позволит избежать проблем в работе с React Router.
Визуализация
Воображаемое сообщение от командования React – каких типов компоненты встречаются:
| Тип Компонента | Космическое созвездие React |
| --------------- |---------------------------- |
| Строка | 🚀 (Ракета) |
| Класс/Функция | 🧪 (Лаборатория) |
| Объект | ⛔ (Знак Стоп) |
Если вместо строки или класса/функции отправлен объект, происходит ошибка.
Дополнительные рекомендации по отладке
В некоторых сложных случаях вам могут пригодиться дополнительные навыки, например, работа с компонентами высшего порядка (HOC) или передача ссылок (рефов):
- Для HOC: проверьте правильность композиции компонентов.
- Для передачи рефов: используйте метод
React.forwardRef
.
Полезные материалы
- Компоненты и пропсы – подробная информация о компонентах и пропсах в React.
- Новая трансформация JSX – информация о новых подходах к использованию JSX.
- Компоненты, элементы и экземпляры в React – различия между этими понятиями в React.
- Модули CommonJS – руководство по работе с модулями CommonJS в Node.js.
- Экспорт в JavaScript – разьяснение различий между разными способами экспорта в ECMAScript 2015.
- Компоненты высшего порядка – информация об использовании HOC в React.
- Проброс рефов – инструкция по использованию
React.forwardRef
для передачи рефов.