导出默认箭头功能无法导入

Question

我正在使用React，我的代码中有这样的东西：

renderDetails.js：

export default renderDetails = (details) => {
    // function logic removed for brevity
}

然后，在同一个文件夹中，我有另一个源文件，我想从中导入它，我做这样的事情：

businessDetails.js：

import renderDetails from './renderDetails';
// rest removed for brevity

但是，我收到一条指向我的renderDetails.js文件的错误消息，并说：“rederDetails未定义”。 任何想法可能是什么问题以及如何解决它？

Answer 1

问题是，即使您将组件导出为默认组件，也会为其指定一个未定义的名称

你可以这样做

export default (details) => {

}

要么

const renderDetails = (details) => {

}
export default renderDetails;

还有一件事，当您尝试渲染组件时，请确保其名称以Uppercase字符开头。

Answer 2

试试这种方式。

functions.jsx

export function renderDetails(details) => {
    // function logic removed for brevity
}

然后导入像，

import { renderDetails } from './functions';

PS ./适用于两个文件都在同一名称空间/文件夹中。

Answer 3

你也可以这样写：

export const exampleFunctionOne = () => {}

export const exampleFunctionTwo = () => {}

然后从所述文件导入所需的各个函数，如下所示：

import { exampleFunctionOne, exampleFunctionTwo } from './exampleFile';

我喜欢这种方法，希望将类似的功能组合到一个文件中，例如验证器或过滤器，使它们易于在整个应用程序中导入和使用。