javascript - 在 react 中有条件地导入引导文件

Question

我在一个应该同时支持 ltr 和 rtl 方向语言的网站上工作..我使用 bootstrap 来完成大部分样式的繁重工作，在我的 react index.js 中，我按如下方式导入 bootstrap 文件

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

当 html 目录属性为 "ltr"时，这很有效但是当 html dir 属性为“rtl”时，我想导入“bootstrap/dist/css/bootstrap.rtl.css”来处理 rtl 样式

我无法同时导入这两个文件，因为这会在网站样式中产生冲突并且看起来不像预期的那样..我该怎么做才能根据 html 目录导入正确的文件？

我正在考虑在导入语句中加入条件，但没有成功

import document.documentElement.dir=="ltr"?'bootstrap/dist/css/bootstrap.css':'bootstrap/dist/css/bootstrap.rtl.css';

我可以做什么来实现我想要的？

编辑:伙计们，如果您有任何其他与我的想法不同/更好的方法，请将其张贴在答案中，如果有更好的选择，您不必坚持我的解决方案的想法

Answer 1

可以使用条件导入来解决这个问题。这里有一个例子来理解它。

if(document.documentElement.dir=="ltr"){
    import 'bootstrap/dist/css/bootstrap.css'
}else{
   import 'bootstrap/dist/css/bootstrap.rtl.css';
}