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>元素。你可以卸载＆＃34;样式表通过删除引用它的元素。您也可以通过将rel属性设置为＆＃34; stylesheet＆＃34;之外的其他内容来禁用它。

但任何改变都需要先找到那个元素。它有点混乱。

如果您希望能够从RTL切换到LTR并在运行中重新启动，那么有一种比卸载＆＃34;更好的方法。 RTL CSS。有一个名为bootstrap-rtl-ondemand的bootstrap-rtl的分支，而不是总是应用RTL样式，只有当文档的方向设置为＆＃34; RTL＆＃34;

安装上面的软件包（或者如果你不使用NPM，至少从软件包的Github repo中获取CSS文件），并进行设置，以便在Bootstrap＆＃39;之后加载CSS。第

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

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

要求和取消动态获取文件

1 个答案: