Динамически изменять ссылку rel="stylesheet" в голове с помощью реакции js

У меня есть многоязычный веб-проект, созданный React.js и typescript, и я хочу использовать bootstrap 5 CSS. Проблема в том, что я хочу динамически изменять ссылку CSS начальной загрузки в разделе заголовка в зависимости от языка (ltr или rtl).

Эта ссылка в файле public/index.html:

<head>
...
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"
integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">  
...
</head>

преобразовать в это динамически:

<head>
...
  <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity = "sha384-mUkCBeyHPdg0tqB6JDd+65Gpw5h/l8DKcCTV2D2UpaMMFd7Jo8A+mDAosaWgFBPl" crossorigin = "anonymous">  
...
</head>

После смены языка я хочу изменить ссылку CSS для rtl или ltr. Я использую метод на маршруте и успешно меняю каталог HTML, но хочу изменить его с помощью React.js и TypeScript.

Есть ли какое-нибудь решение для этого?

reactjs

25.12.2020 17:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

630

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать это с помощью ReactHelmet. Вы можете создать компонент StyleSheetUrlSelector. Затем на основе ваших критериев вы можете отображать любую таблицу стилей, которую хотите отобразить.

import React,{ FC } from "react";
import ReactHelmet from 'react-helmet';
interface ICssSelector {
   ltr:boolean;
}

const CssSelector:FC<ICssSelector> =(props)=>{
     const {ltr} =props;
   return(
    ltr === true? 
    <ReactHelmet link = {
      [{"rel": "stylesheet", type:"text/css", "href": "/style.ltr.css"}]
    }/>
    : <ReactHelmet link = {
      [{"rel": "stylesheet", type:"text/css", "href": "/style.rtl.css"}]
    }/>
   );

}
export default CssSelector

25.12.2020 18:45

Другие вопросы по теме

Redux возвращает прокси-объект вместо состояния

Как использовать material-ui inputBase для выбора компонента?

Ошибка React Native. Неудачный тип опоры: недопустимая опора «дети» типа «массив», предоставленная для «Оверлея»,

Пользовательский CSS стилизованного компонента в ReactJS

Есть ли способ экспортировать несколько фрагментов из одного файла фрагмента? в редукс-тулките

Как подключить бэкэнд Python Flask к интерфейсу React? Как это работает вместе?

Циклический просмотр элементов списка, отображаемых из состояния (javascript)

React-Router open Ссылка в новом содержимом вкладки открывается в той же существующей вкладке

Как заставить приложение React фильтровать только один элемент

Как применить переход CSS при скрытии?

Динамически изменять ссылку rel="stylesheet" в голове с помощью реакции js

Ответы 1

Другие вопросы по теме

Похожие вопросы