在反应中，如何更改链接在 index.html 头部的 CSS 文件？

Question

我有两种样式（rtl - ltr）的网站模板，每种样式都有不同的方向文件。 所以，当我改变语言（en - ar）时我如何加载每种样式。

ps：我使用create-react-app。

编辑：-

文件夹结构

• 源文件
  • css
    • 样式-rtl.css
    • 样式-ltr.css
  • 图像
    • 图片文件.jpg
  • 索引.js

和样式文件

.div-style {
  background-image: url('../images/imgFile.jpg');
}

Answer 1

所以我所做的是获取具有方向样式的链接标签，并将它的 href 更改为其他 CSS 文件，并且它工作正常。

索引.html

<link rel="stylesheet" id="style-direction" href="/css/style-ltr.css">

然后在组件中，我做类似的事情

const style = document.getElementById('style-direction');
if (lang === 'ar') {
  style.href = '/css/style-ltr.css';
} else {
  style.href = '/css/style-rtl.css';
}

Answer 2

如果你使用 create-react-app，它会在你的项目的 src 文件夹中有一个主文件index.js 。

这个 index.js 有一行，你会看到它们包含了 index.css 文件，如下（第 3 行）：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

如果您想以编程方式包含 css 文件，建议使用这种方法。

然后，您可以根据 rtl 和 ltr 的标志修改 index.js 代码。 例如，您有一个标志变量（比如let ltr = true ），它根据您选择的语言具有真或假。

那么代码可以是：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

//Fetch the flag variable's value based on the language selected.
...
//After that variable (say ltr) is fetched do the following code.

if(ltr === true) {
   import './ltr.css';
} else {
   import './rtl.css';
}

附注。 上面的代码只是给你一个想法，你可以在 redux store、localStorage 等中管理标志。

希望这会有所帮助。

Answer 3

下面是无需重新加载页面即可更改样式表的代码

import i18next from "i18next"
import { Suspense, useEffect } from "react"
import { useSelector } from "react-redux"

export default function LanguageProvider({ children }) {
  const currentLang = useSelector(({ lang = "en" }) => lang)

  useEffect(() => {
     i18next.changeLanguage(currentLang)
   }, [currentLang])

  if (currentLang === "ar") {
    const links = document.getElementsByTagName("link")

for (let each of links) {
  if (each.getAttribute("lang") === "english") {
    each.href = ""
    each.rel = ""
    each.integrity = ""
    each.crossOrigin = ""
    each.setAttribute("lang", "")
  }
}

for (let each of links) {
  if (each.getAttribute("lang-sheet") === "english") {
    each.href = ""
    each.rel = ""
    each.setAttribute("lang-sheet", "")
  }
}

const bootstrapRTLLink = document.createElement("link")
const rtl2 = document.createElement("link")
rtl2.rel = "stylesheet"
rtl2.setAttribute("lang-sheet", "arabic")
rtl2.href = "/style-ar.css"
bootstrapRTLLink.rel = "stylesheet"
bootstrapRTLLink.setAttribute("lang", "arabic")
bootstrapRTLLink.href = "https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css"
bootstrapRTLLink.integrity =
  "sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If"
bootstrapRTLLink.crossOrigin = "anonymous"

document.head.appendChild(bootstrapRTLLink)
document.head.appendChild(rtl2)
  } else {
const links = document.getElementsByTagName("link")

for (let each of links) {
  if (each.getAttribute("lang") === "arabic") {
    each.href = ""
    each.rel = ""
    each.integrity = ""
    each.crossOrigin = ""
    each.setAttribute("lang", "")
  }
}

for (let each of links) {
  if (each.getAttribute("lang-sheet") === "arabic") {
    each.href = ""
    each.rel = ""
    each.setAttribute("lang-sheet", "")
  }
}

const ltrLink = document.createElement("link")
ltrLink.rel = "stylesheet"
ltrLink.href = "/style.css"
ltrLink.setAttribute("lang-sheet", "english")
const bootstrapLTRLink = document.createElement("link")
bootstrapLTRLink.rel = "stylesheet"
bootstrapLTRLink.href =
  "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
bootstrapLTRLink.integrity =
  "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
bootstrapLTRLink.crossOrigin = "anonymous"
bootstrapLTRLink.setAttribute("lang", "english")

document.head.appendChild(bootstrapLTRLink)
document.head.appendChild(ltrLink)
  }

  if (currentLang === "ar") {
     return <Suspense fallback={<></>}>{children}</Suspense>
  }

  return <Suspense fallback={<></>}>{children}</Suspense>
}