Динамически запрашивать и отменять запрос файла - PullRequest
Новая
       7

Динамически запрашивать и отменять запрос файла

0 голосов
/ 30 мая 2018

Я меняю язык динамически, поэтому я хочу переключиться с 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.

Может кто-нибудь предложить мне решение или даже альтернативное решение для меня приемлемо.

1 Ответ

0 голосов
/ 30 мая 2018

Я не знаю, есть ли что-то особенное в том, как работает React require, но в целом загрузка таблицы стилей в основном означает вставку элемента <link>, который ссылается на него.Вы можете «выгрузить» таблицу стилей, удалив элемент, который на нее ссылается.Вы также можете отключить его, установив для его атрибута rel значение, отличное от «таблицы стилей».

Но любое изменение требует сначала найти этот элемент.Это немного грязно.

Если вы хотите иметь возможность переключаться с RTL на LTR и обратно на лету, есть лучший способ, чем «выгрузить» RTL CSS.Есть ответвление bootstrap-rtl, называемое bootstrap-rtl-ondemand , которое вместо всегда , применяющего стили RTL, применяет их, только когда для направления документа установлено значение "rtl".

Установите вышеуказанный пакет (или, если вы не используете NPM, получите хотя бы файлы CSS из репозитория Github пакета), и настройте его так, чтобы CSS загружался после Bootstrap.

ТеперьВы можете переключаться между RTL и LTR в основном по желанию.Ваш метод выше становится таким простым: 

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