Question

我得到这个eslint错误：

首选默认导出

import React, { Component } from 'react';

class HomePage extends Component {
  render() {
    return (
      <div className="Section">HomePage</div>
    );
  }
}

export { HomePage };

我尝试过： export { default as Homepage };

然后我得到致命的解析错误。

然后我把它改为：

export default HomePage;

清除夹板错误。

然后抛出：

'./ HomePage'不包含名为'HomePage'的导出。

因为我这样调用HomePage： import { HomePage } from './HomePage';

如果我删除括号，则会收到此错误：

未找到“导出'默认'（导入为'HomePage'） './HomePage'

import HomePage from './HomePage';
<PrivateRoute exact path="/" component={HomePage} />

将此更改为首选默认导出的正确方法是什么？

Answer 1

来自eslint-plugin-import

当模块中只有一个导出时，更喜欢使用默认导出而不是命名导出。

class HomePage extends Component {
  //....
}

export default HomePage

在另一个档案中：

import HomePage from './Hello';

点击此处codesandbox

Answer 2

这是一个使用函数的例子：

function HomePage() {
    function aHelperMethod() {
        //
    }

    return {
        aHelperMethod,
    }
}

现在将其导入另一个文件

import HomePage from './Hello';

要使用它，您必须实例化它

const homePage = HomePage()
homePage.aHelperFunction()

Answer 3

在某些情况下，模块中应该有多个命名导出。

export const foo = 'foo';
export const bar = 'bar';

首选默认导出eslint错误

3 个答案: