如何在 JS/React 中导出和导入自定义助手？

IT技术 javascript reactjs logging console.log
2021-04-26 14:21:07

任务 ：

  • 所以，我宁愿console每次要使用它时都不要打字。
    我想导入一些速记，例如--

    log('hi') 与...一样 console.log('hi')


案例：

  • 这是我迄今为止的工作。
    我想使用log, warn, error, info相应控制台功能的简写。
  • 我希望这看起来不是完全不好的做法，但我愿意倾听。

问题 ：

  • 我很困惑如何导出和导入这些以使用所需的符号。

对所有建议开放。
请建议。
谢谢你。

log = (arg, ...argv) => console.log(arg, ...argv)
err = (arg, ...argv) => console.error(arg, ...argv)
error = (arg, ...argv) => console.error(arg, ...argv)
info = (arg, ...argv) => console.info(arg, ...argv)
warn = (arg, ...argv) => console.warn(arg, ...argv)

// how to export? should this be a class?
2个回答

是的，你可以速记。

创建一个文件 ex :log.js具有以下功能。

export const log = (arg, ...argv) => {
    console.log(arg, ...argv)
}
export const err  = (arg, ...argv) => {
  console.error(arg, ...argv)
} 
export const error   = (arg, ...argv) => {
   console.error(arg, ...argv)
}

export const info   = (arg, ...argv) => {
  console.info(arg, ...argv)
}

export const warn   = (arg, ...argv) => {
   console.warn(arg, ...argv)
}


稍后您只需将这些功能导入到您想要使用的其他组件中。

import {log, err, error, info, warn} from './log'; //path may be different

然后在任何你想要的地方调用函数。

log('hi', [1,2,3]);
err('hi', [1,2,3]);
error('hi', [1,2,3]);
info('hi', [1,2,3]);
warn('hi', [1,2,3]);

ES6中导出函数的通用关键字是export（自定义导出函数文件）

export const functionName = (arg, ...argv) => {
   console.log(arg, ...argv)
}

ES6中导入函数的通用关键字是import（自定义导入函数文件）

import { functionName } from './export_function_file';
其它你可能感兴趣的问题
上一篇如何将 JSON 数据中的图像导入 create-react-app 下一篇MeshMixer 可以导出模型进行彩色 3D 打印吗？