我认为以下内容是可以的:
const Tab = connect( mapState, mapDispatch )( Tabs );
export default Tab;
然而,这是不正确的:
export default const Tab = connect( mapState, mapDispatch )( Tabs );
然而,这是好的:
export default Tab = connect( mapState, mapDispatch )( Tabs );
这可以解释为什么const无效的导出默认?它是一个不必要的添加&任何声明为export default的东西都被假定为const或类似的?
如果组件名称是在MyComponent.js文件中解释的,那就不要给组件命名,这样可以保持代码简洁。
import React from 'react'
export default (props) =>
<div id='static-page-template'>
{props.children}
</div>
更新:由于在堆栈跟踪中将其标记为未知,因此不建议这样做
更新2:我只使用下面的es5版本,因为它将名称保存在堆栈跟踪和react开发工具上。
import React from 'react'
export default function MyComponent(props) {
return (<div id='static-page-template'>
{props.children}
</div>)
}
保罗的答案就是你想要的。然而,作为一个实际问题,我认为你可能会对我在自己的React+Redux应用程序中使用的模式感兴趣。
下面是我的一个路由的精简示例,展示了如何定义组件并将其导出为默认值:
import React from 'react';
import { connect } from 'react-redux';
@connect((state, props) => ({
appVersion: state.appVersion
// other scene props, calculated from app state & route props
}))
export default class SceneName extends React.Component { /* ... */ }
(注意:我将术语“场景”用于任何路由的顶级组件)。
我希望这对你有帮助。我认为它比传统的connect(mapState, mapDispatch)(BareComponent)看起来干净得多
如果组件名称是在MyComponent.js文件中解释的,那就不要给组件命名,这样可以保持代码简洁。
import React from 'react'
export default (props) =>
<div id='static-page-template'>
{props.children}
</div>
更新:由于在堆栈跟踪中将其标记为未知,因此不建议这样做
更新2:我只使用下面的es5版本,因为它将名称保存在堆栈跟踪和react开发工具上。
import React from 'react'
export default function MyComponent(props) {
return (<div id='static-page-template'>
{props.children}
</div>)
}
保罗分享的答案是最好的。为了进一步扩展,
每个文件只能有一个默认导出。而可以有多个const exports。默认变量可以用任何名称导入,而const变量可以用它的特定名称导入。
var message2 = 'I am exported';
export default message2;
export const message = 'I am also exported'
在导入端,我们需要像这样导入它:
import { message } from './test';
or
import message from './test';
在第一个导入中,导入const变量,而在第二个导入中,将导入默认的const变量。