ReactNative报错:Expected a component class,got [Object Object]
本文由 小茗同学 发表于 2016-11-30 浏览(1999)
最后修改 2016-11-30 标签:reactnative 报错

场景一

单独写的一个component:

epg-default-page.js:

export default class EpgDefaultPage extends Component
{
	// 省略
}

然后引用:

import epgDefaultPage from './epg-default-page';
// 省略其它代码
export default class EpgCompent extends Component
{
	render()
	{
		return (
			<Navigator initialRoute={{component: 'EpgDefaultPage'}}
				renderScene={(route, navigator) =>
				{
					return (<epgDefaultPage navigator={navigator} route={route}/>);
				}} />
		);
	}
}

最后报错如下:

Expected a component class,got [Object Object]

把import的变量epgDefaultPage大写即可,即改成EpgDefaultPage就不报错了。

下面这样也会报同样的错误(必须把temp改成Temp才行,对于这种限制我也是醉了,至少错误提示不正确):

import EpgDefaultPage from './epg-default-page';
// 省略其它代码
export default class EpgCompent extends Component
{
	render()
	{
		return (
			<Navigator initialRoute={{component: 'EpgDefaultPage'}}
				renderScene={(route, navigator) =>
				{
					var temp = EpgDefaultPage;
					return (<temp navigator={navigator} route={route}/>);
				}} />
		);
	}
}

场景二

还发现一个问题,import进来可以,但是require进来就不行,怪了:

var EpgDefaultPage = require('./epg-default-page');
// 省略其它代码
export default class EpgCompent extends Component
{
	render()
	{
		return (
			<Navigator initialRoute={{component: 'EpgDefaultPage'}}
				renderScene={(route, navigator) => <EpgDefaultPage navigator={navigator} route={route}/>} />
		);
	}
}

报错如下:

不知道哪位大神知道import和require有啥区别不。

更新:

找到区别了:

对于使用export default导出的类epg-default-page.js

export default class EpgDefaultPage extends Component
{
	// 省略
}

引用时:

import p1 from './epg-default-page';
// 等价于 import {default as p1} from './epg-default-page';
var p2 = require('./epg-default-page');
console.log(p1 == p2); // false
console.log(p1 == p2.default); // true