代码之家  ›  专栏  ›  技术社区  ›  Vishal

动态要求和取消要求文件

  •  0
  • Vishal  · 技术社区  · 7 年前

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

    我使用引导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 .

    • 英语 , isRTL becomes false 但是 引导程序-rtl.css 不是 unrequired ,所以我还是看到了一切 RTL .

    有人能给我推荐一个解决方案,甚至是其他的解决方案吗?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Vishal    7 年前

    我不知道有没有什么特别的反应 require 但是一般来说,加载样式表基本上意味着插入 <link> 引用它的元素。您可以通过移除引用样式表的元素来“卸载”样式表。您也可以通过设置 rel 除了“样式表”之外的属性。

    但任何改变都需要首先找到这个元素。有点乱。

    如果您希望能够从rtl切换到ltr并重新运行,有一种比“卸载”rtl css更好的方法。有一个叫 bootstrap-rtl-ondemand 而不是 总是 应用rtl样式时,仅当文档方向设置为“rtl”时才应用它们。

    安装上面的包(或者如果不使用npm,至少从包的github repo中获取css文件),并设置一些设置,以便css在引导后加载。

    现在你可以在rtl和ltr之间随意切换。您的上述方法变得非常简单:

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