Ошибки при включении простого компонента в приложение (react/redux)

У меня есть шаблон на основе https://github.com/coryhouse/react-slingshot/. Я удалил приложение FuelSavings и заменил его тем, которое работает нормально, но я написал компонент, и когда я включаю его в приложение, он не позволяет ничего отображать (я получаю белую страницу).

Я получаю 3 ошибки, когда добавляю тег <UserHeader /> в App.js:

  • «Предупреждение: React.createElement: тип не должен быть нулевым, неопределенным, логическим или числовым. Это должна быть строка (для элементов DOM) или ReactClass (для составных компонентов). Проверьте метод рендеринга App».
  • Неперехваченное нарушение инварианта: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Проверьте метод рендеринга App.
  • Uncaught TypeError: не удается прочитать свойство «реквизит» неопределенного

Если я удалю тег UserHeader, остальная часть страницы загрузится нормально.

источник/компоненты/App.js

import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';
import { UserHeader } from './UserHeader';

const App = (props) => {
  return (
    <div>
      <IndexLink to="/">Home</IndexLink> | <Link to="/About">About</Link>
      <UserHeader />

      {props.children}
    </div>
  );
};

export default App;

источник/компоненты/UserHeader.js

import React, { Component, PropTypes } from 'react';

const UserHeader = (props) => {
  return (
    <p>Welcome!</p>
    );
};

export default UserHeader;

Любые мысли приветствуются. Сам сервер не показывает никаких проблем, просто предупреждение об отсутствии проверки реквизита. Проблема заключается в том, что любой код в UserHeader не может быть выполнен. Я просто не достаточно опытен, чтобы знать, как!


reactjs redux react-redux react-router react-slingshot
person charlie    schedule 17.03.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Этот:

import { UserHeader } from './UserHeader'

должно быть:

import UserHeader from './UserHeader'

потому что UserHeader является экспортом по умолчанию.

person pfkurtz    schedule 17.03.2016
comment
Это было!! Спасибо! - person charlie; 17.03.2016