0

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

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

  • “警告：React.createElement：类型不应为空、未定义、布尔值或数字。它应该是字符串（对于 DOM 元素）或 ReactClass（对于复合组件）。检查渲染方法App。”
  • Uncaught Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查App.
  • 未捕获的类型错误：无法读取未定义的属性“道具”

如果我删除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;

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

4

1 回答 1

2

这：

import { UserHeader } from './UserHeader'

应该：

import UserHeader from './UserHeader'

因为UserHeader是默认导出。

于 2016-03-17T00:43:51.107 回答