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

Posted 2023-02-22

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

【英文标题】：How can I import a JS file with special characters in it's name in React and JSX?

【发布时间】：2021-12-08 19:28:55

【问题描述】：

我可以

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

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

【参考方案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 函数将在蛇案例中导出。在我们详细查看脚本之前不确定。检查此以获取更多详细信息***.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'] 不知道为什么