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

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

p、 s:我使用创建反应应用程序

编辑：-

文件夹结构

• src
  • css
    • style-rtl.css
    • style-ltr.css
  • 图像
    • imgFile.jpg
  • index.js

和样式文件

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

---

如果您使用的是createreact应用程序，那么在项目的src文件夹中会有一个主文件index.js

这个index.js有一行，您可以看到它们包含index.css文件，如下所示（第3行）：

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

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

那么代码可以是：

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商店，localStorage等管理标志

---

希望这能有所帮助。

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

index.html

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

---

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

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>
}

从“i18next”导入i18next
从“react”导入{suspent，useffect}
从“react redux”导入{useSelector}
导出默认函数语言提供程序（{children}）{
const currentLang=useSelector（{lang=“en”}）=>lang）
useffect（（）=>{
i18next.changeLanguage（当前语言）
}，[currentLang]）
如果（currentLang==“ar”）{
const links=document.getElementsByTagName（“链接”）
for（让每个链接）{
if（每个.getAttribute（“lang”）=“english”）{
each.href=“”
each.rel=“”
each.integrity=“”
each.crossOrigin=“”
each.setAttribute（“lang”，“lang”）
}
}
for（让每个链接）{
如果（每个.getAttribute（“语言表”）=“英语”）{
each.href=“”
each.rel=“”
each.setAttribute（“lang sheet”，“”）
}
}
const bootstraprtlink=document.createElement（“链接”）
const rtl2=document.createElement（“链接”）
rtl2.rel=“样式表”
rtl2.setAttribute（“语言表”、“阿拉伯语”）
rtl2.href=“/style-ar.css”
bootstraprtlink.rel=“样式表”
setAttribute（“lang”，“阿拉伯语”）
bootstraprtlink.href=”https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css"
bootstraprtlink.integrity=
“sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If”
bootstraprtlink.crossOrigin=“匿名”
document.head.appendChild（bootstraprtlink）
document.head.appendChild（rtl2）
}否则{
const links=document.getElementsByTagName（“链接”）
for（让每个链接）{
if（每个.getAttribute（“lang”）=“阿拉伯语”）{
each.href=“”
each.rel=“”
each.integrity=“”
each.crossOrigin=“”
each.setAttribute（“lang”，“lang”）
}
}
for（让每个链接）{
if（每个.getAttribute（“语言表”）=“阿拉伯语”）{
each.href=“”
each.rel=“”
each.setAttribute（“lang sheet”，“”）
}
}
const ltrLink=document.createElement（“链接”）
ltrLink.rel=“样式表”
ltrLink.href=“/style.css”
setAttribute（“语言表”、“英语”）
const bootstrapLTRLink=document.createElement（“链接”）
bootstrapLTRLink.rel=“样式表”
bootstrapLTRLink.href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css“
bootstrapLTRLink.integrity=
“sha384-TX8t27EcRE3e/IHU7ZMQXVNCDAY5UIKZ4REKGIXEMED4M0JLFIDPVG6UQKI2XR2”
bootstrapLTRLink.crossOrigin=“匿名”
setAttribute（“lang”，“english”）
document.head.appendChild（bootstrapLTRLink）
document.head.appendChild（ltrLink）
}
如果（currentLang==“ar”）{
返回{children}
}
返回{children}
}

我尝试了，但它抛出了一个错误，因为我有这样的图像URL。/image，它无法解决它，尽管它的路径正确。我最终得到了带有方向样式的链接标记，并将其href更改为其他CSS文件。我发布了一个答案，但如果你对我之前评论中的错误有解决方案，我愿意将你的答案标记为正确答案谢谢穆罕默德，你能给我看看你的文件夹结构和css文件吗？我会尽力提供帮助。分析错误：“导入”和“导出”可能只出现在顶层

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

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>
}