如何在React上导出2个箭头函数

Question

我有这个文件

const validateIfDataExist = value => (value === null ? 'N/A' : value);

const removeNumbersFromAString = value => value.replace(/[^a-z]/gi, '');

export { validateIfDataExist, removeNumbersFromAString };

我想在这里称呼模块之一：

import removeNumbersFromAString from '../../utils/validation-utils';

但是尝试导入时出现错误：

  

未在导入的模块中声明默认导出

那么，为什么我应该设置export default？

Answer 1

由于您没有使用xml-apis:1.4.01导出：

default

您将不得不使用命名导入。

export default removeNumbersFromAString;

Answer 2

您使用的语法假设您正在尝试从../../utils/validation-utils导入默认导出。

要使其与您现有的物品一起使用

import { removeNumbersFromAString } from '../../utils/validation-utils';

这将从该文件中提取命名的导出。您已经通过导出validateIfDataExist和removeNumbersFromAString的方式来暴露它们。

错误告诉你什么

您似乎理解了这一点，但我认为提出来是很公平的。您可以通过执行以下操作从文件中导出默认常量或函数：

export default function validateIfDataExist(value) {
  return value === null ? 'N/A' : value;
}

然后使用import语句，您可以选择在导入文件中保留相同的名称或将其重命名。

import removeNumbersFromAString from '../../utils/validation-utils';

或

import somethingTotallyDifferent from '../../utils/validation-utils';

两者的工作原理完全相同，导入默认函数并将其强制转换为变量。

一切运算符（*）

总而言之，这也将适用于您所拥有的

import * as validations from '../../utils/validation-utils';

validations.removeNumbersFromAString(string);
validations.validateIfDataExist(data);

Answer 3

您可以这样更改导入：

export const validateIfDataExist = value => (value === null ? 'N/A' : value);

export const removeNumbersFromAString = value => value.replace(/[^a-z]/gi, '');

export default { validateIfDataExist, removeNumbersFromAString };

那里有一个如何导出所有内容的示例，也许您不需要全部导出，但是您可以决定。现在，要导入，您可以：

import { removeNumbersFromAString, validateIfDataExist } from '../../utils/validation-utils';

或

import validationUtils from '../../utils/validation-utils';
const { validateIfDataExist, removeNumbersFromAString } = validationUtils;

导出所需的内容而不是默认的内容是避免在组件中包含不必要的繁重库的更好方法，但是您可以两者都做

希望这对您有帮助！