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文件的错误消息，并说：＆＃34; rederDetails未定义＆＃34;。任何想法可能是什么问题以及如何解决它？

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';

P.S。 ./适用于两个文件都位于同一名称空间/文件夹中的情况。

Answer 3

您也可以这样写它们：

export const exampleFunctionOne = () => {}

export const exampleFunctionTwo = () => {}

然后从所需文件中导入所需的各个功能，如下所示：

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

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