Требовать и отменить требование файла динамически
Я меняю язык динамически, поэтому хочу переключиться с 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.
Может ли кто-нибудь предложить мне решение или даже альтернативное решение, приемлемое для меня.
Я не очень много возился с React, так что здесь я как бы догадываюсь. Но когда вы проверяете страницу с помощью инструментов разработчика после перехода на арабский, видите ли вы <link> в добавленную таблицу стилей? (Более конкретно, посмотрите, что произойдет, если вы удалите его.)
@Shadowfool извиняюсь за то, что указанная вами ссылка уже была мной опробована, но она не работает.
@cHao да, я вижу ссылку, добавленную в заголовок документа. Если я удалю его вручную, rtl исчезнет, и я получу ltr. Спасибо за предложение. можешь сказать мне, что делать дальше?
Возможный дубликат Замена файла css на лету (и применение нового стиля к странице)
@ gforce301, в котором ничего не говорится о реакции. У него есть решения с использованием jquery.
@Vishal: Мое личное предложение, если вы хотите иметь возможность делать и то, и другое "на лету", это использовать что-то вроде bootstrap-rtl-ondemand и установить атрибут dir в элементе <html> по мере необходимости.
@cHao, не могли бы вы привести пример этого?
@Vishal: После переключения на материал ondemand он выглядит таким же простым, как document.documentElement.dir = nextProps.isRTL ? 'rtl' : 'ltr';.
@cHao Я попытался реализовать код, который вы дали, и теперь могу изменить атрибут dir html с ltr на rtl и наоборот. Но прикладной css всегда выглядит как rtl. Не могли бы вы посоветовать мне импортировать файл css, поскольку в документации предлагается импортировать из папки с именем bootstrap-rtl, но имя пакета - bootstrap-rtl-ondemand, как и в случае с пакетом bootstrap-rtl.
@cHao Я понял. Мне пришлось удалить bootstrap-rtl, а затем установить bootstrap-rtl-ondemand, а затем мне пришлось ссылаться на файл css из папки bootstrap-rtl-ondemand из node_modules. Спасибо чувак. Не могли бы вы выложить это как ответ? чтобы я мог отметить его как принятый, и в будущем другие могут получить помощь по этому поводу.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я не знаю, есть ли что-то особенное в том, как работает React requires, но в целом загрузка таблицы стилей означает вставку элемента <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';
}
}
Спасибо за ответ. Это работает за гранью моего воображения.
Я оставлю правку на усмотрение других. Мой опыт подсказывает мне, что проверка изменений перед их применением в любом случае не будет иметь значительного эффекта в подобном случае, но, как я уже упоминал, я не особо возился с React. :П
Рад снова Вас слышать. :)
Возможный дубликат код / модули выгрузки