动态要求和取消要求文件

Question

我正在动态更改语言，所以我想从 rtl 切换到 ltr，反之亦然。

我正在使用 bootstrap-rtl 来支持 rtl。

这是我的代码：

  componentWillReceiveProps(nextProps) {
    if (this.props.isRTL !== nextProps.isRTL) {
      if (nextProps.isRTL) {
        require('bootstrap-rtl/dist/css/bootstrap-rtl.css');
      } else {
        //what should i do here????????????
      }
    }
  }

因此，当组件首次呈现时，english 被选中。所以，isRTL is false。结果 require('........bootstrap-rtl.css') 没来玩。
现在，当我将语言更改为 arabic 时，isRTL becomes true 和 bootstrap-rtl.css 为 required。现在，我可以看到一切 rtl.
现在，当我再次将语言更改为 english、isRTL becomes false，但 bootstrap-rtl.css 不是 unrequired，所以我仍然看到所有内容 rtl.

有人可以向我建议解决方案，甚至是我可以接受的替代解决方案。

Answer 1

我不知道 React require 的东西是否有什么特别之处，但一般来说，加载样式表基本上意味着插入一个引用它的 <link> 元素。您可以通过删除引用样式表的元素来 "unload" 样式表。您也可以通过将其 rel 属性设置为 "stylesheet".

以外的内容来禁用它

但任何更改都需要首先找到该元素。有点乱。

如果您希望能够在运行中从 RTL 切换到 LTR 并返回，有比 "unloading" RTL CSS 更好的方法。有一个名为 bootstrap-rtl-ondemand 的 bootstrap-rtl 分支，它不是 always 应用 RTL 样式，而是仅在文档的方向设置为 [=30= 时才应用它们].

安装上面的包（或者如果你不使用 NPM，至少从包的 Github 仓库中获取 CSS 文件），然后进行设置以便 CSS 在 Bootstrap 之后加载。

现在RTL和LTR基本可以随意切换了。您上面的方法变得如此简单：

  componentWillReceiveProps(nextProps) {
    if (this.props.isRTL !== nextProps.isRTL) {
      document.documentElement.dir = (nextProps.isRTL) ? 'rtl' : 'ltr';
    }
  }

动态要求和取消要求文件

Require and UnRequire a file dynamically

javascript

css

require

right-to-left

reactjs