将简单组件包含到 App 时出错 (react/redux)

Question

我有一个基于 https://github.com/coryhouse/react-slingshot/ 的样板文件。我已经删除了 FuelSavings 应用程序并将其替换为工作正常的应用程序 - 但我编写了一个组件，当我将其包含在应用程序下时，它会阻止任何内容呈现（我得到一个白页）。

当我将 <UserHeader /> 标签添加到 App.js 时出现 3 个错误：

"Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of App."
未捕获的不变违规：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。检查 App.
未捕获的类型错误：无法读取未定义的属性 'props'

如果我删除 UserHeader 标记，页面的其余部分加载得很好。

src/components/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;

src/components/UserHeader.js

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

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

export default UserHeader;

欢迎任何想法。服务器本身显示没有问题，只是关于缺少 props 验证的警告。问题是阻止 UserHeader 中的任何代码执行。我只是经验不够，不知道怎么做！

Answer 1

这个：

import { UserHeader } from './UserHeader'

应该是：

import UserHeader from './UserHeader'

因为 UserHeader 是默认导出。

将简单组件包含到 App 时出错 (react/redux)

Errors when including simple component into App (react/redux)

reactjs

react-router

redux

react-slingshot

react-redux