Question

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

当我将<UserHeader />标记添加到App.js中时，我收到3个错误：

“警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查{{1的render方法}}“。
未捕获的不变违规：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。检查App。
未捕获的TypeError：无法读取未定义的属性'props'

如果我删除App标记，则页面的其余部分加载就好了。

的src /组件/ App.js

UserHeader

的src /组件/ UserHeader.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;

欢迎任何想法。服务器本身显示 no 问题，只是关于错过道具验证的警告。问题是阻止import React, { Component, PropTypes } from 'react'; const UserHeader = (props) => { return ( <p>Welcome!</p> ); }; export default UserHeader;中的任何代码执行。我只是没有足够的经验知道如何！

Answer 1

此：

import { UserHeader } from './UserHeader'

应该是：

import UserHeader from './UserHeader'

因为UserHeader是默认导出。

将简单组件包含到App中时的错误（react / redux）

1 个答案: