Обнаружена ошибка: Невозможное нарушение: Неверный тип элемента: ожидался строковый тип (для встроенных компонентов) или класс/функция, но получен объект

Question

Я получаю следующую ошибку:

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Вот мой код:

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router');
var Route = Router.Route;
var Link = Router.Link;

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    );
  }
});

var About = require('./components/Home');

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body);

Файл Home.jsx выглядит так:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render: function() {
    return (
      <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;

Проблема заключается в том, что я получаю ошибку, связанная с типом элемента, который не распознается. Я не уверен, правильно ли я подключил компонент Home или возможно возникла какая-то другая ошибка. Помогите, пожалуйста!

Answer 1

В вашем случае (при использовании Webpack) разница заключалась в следующем:

import {MyComponent} from '../components/xyz.js';

и

import MyComponent from '../components/xyz.js';

Второй вариант работает, в то время как первый вызывает ошибку. Возможно, причина в том, как экспортируется ваш компонент в файле xyz.js. Если он экспортируется как именованный экспорт (например, export const MyComponent = ...), то первый вариант будет правильным. Если же используется экспорт по умолчанию (например, export default MyComponent), то следует использовать второй вариант. Убедитесь, что синтаксис экспорта соответствует тому, как вы его импортируете.

Answer 2

Если вы используете CommonJS для импорта, то вам нужно получить доступ к свойству default, чтобы правильно импортировать компонент. Вот правильный способ:

var About = require('./components/Home').default;

Это нужно, если ваш модуль экспортируется с использованием export default. Если вы используете ES6, рекомендуется использовать import:

import About from './components/Home';

Такой способ будет более современным и предпочтительным, особенно если ваш проект настроен на поддержку ES6.

Answer 3

Да, если вы модифицировали свой React-компонент и забыли указать module.exports, вы можете столкнуться с ошибкой. Например, ваш ранее валидный, немодульный код компонента может выглядеть так:

var YourReactComponent = React.createClass({
    render: function() { ...

Однако после модуларизации вам необходимо добавить module.exports, чтобы компонент был доступен для импорта в других файлах:

module.exports = React.createClass({
    render: function() { ...

Если вы забудете указать module.exports, вы получите ошибку при попытке использовать компонент в других частях вашего приложения. Проверьте, чтобы правильно экспортировать компоненты, и вы избежите подобных проблем.

Answer 4

В вашем случае одна из экспортируемых дочерних модулей не возвращала корректный React-компонент.

const Component = <div>Content</div>;

вместо

const Component = () => <div>Content</div>;

Ошибка появилась в родительском компоненте, поэтому было сложно это обнаружить.

Рекомендация: убедитесь, что вы всегда экспортируете функциональный компонент в формате стрелочной функции или обычной функции, если хотите использовать React-компоненты правильно. Это поможет избежать подобных проблем в будущем.

Answer 5

Если вы получаете эту ошибку, это может быть связано с тем, что вы импортируете Link следующим образом:

import { Link } from 'react-router'

Вместо этого, возможно, лучше использовать:

import { Link } from 'react-router-dom'
                      ^--------------^

Я полагаю, что это требование для версии 4 react-router.

Обнаружена ошибка: Невозможное нарушение: Неверный тип элемента: ожидался строковый тип (для встроенных компонентов) или класс/функция, но получен объект

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных