如何在 React 和 JSX 中导入名称中包含特殊字符的 JS 文件？答案

【问题标题】：How can I import a JS file with special characters in it's name in React and JSX?如何在 React 和 JSX 中导入名称中包含特殊字符的 JS 文件？
【发布时间】：2021-12-08 19:28:55
【问题描述】：

如何在 React 和 JSX 中导入名称中包含特殊字符的 JS 文件？

我可以

import { tomorrow} from 'react-syntax-highlighter/dist/esm/styles/hljs';

（文件夹包含明天.js 和 tomrorrow-night.js）

但我不能：

import { tomorrow-night} from 'react-syntax-highlighter/dist/esm/styles/hljs';

我认为解构在这里不起作用，因为它是一个导入语句。

【问题讨论】：

标签： javascript reactjs jsx react-syntax-highlighter

【解决方案1】：

你可以试试

import * as Highlighter from 'react-syntax-highlighter/dist/esm/styles/hljs';

const TomorrowNight = Highlighter[`tomorrow-night`];

【讨论】：

感谢您的回答，但我发现在导入名称后现在是 Snake 格式而不是 kabab 格式，我的意思是 const tmrw_night=Highlighter['tomorrowNight'] 知道为什么吗？
文件名将以 kabab 大小写，因此同时要求您从 kabab 中的文件导入。 while 函数将在蛇案例中导出。在我们详细查看脚本之前不确定。检查此以获取更多详细信息stackoverflow.com/questions/46677752/…

【解决方案2】：

使用import * as blah 导入怎么样？这为您提供了一个对象，然后您可以在其中查找任何字符串。

import * as tmrw from from 'react-syntax-highlighter/dist/esm/styles/hljs';
const tmrw_night = tmrw['tomorrow-height']

【讨论】：

感谢您的回答，但我发现在导入名称后现在是 Snake 格式而不是 kabab 格式，我的意思是 const tmrw_night=tmrw['tomorrowNight'] 不知道为什么