Question

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

p.s：我使用create-react-app。

修改： -

文件夹结构

SRC
- CSS
  - 样式rtl.css
  - 样式ltr.css
- 图像
  - imgFile.jpg
- index.js

和样式文件

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

Answer 1

如果您使用的是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代码。例如，您有一个标志变量（Say 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';
}

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

希望这有帮助。

Answer 2

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

的index.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 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>
}

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

3 个答案: