场景一
单独写的一个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