时间戳

首页 > 解决方案 > react js动态修改head中的link rel="stylesheet"

reactjs - react js动态修改head中的link rel="stylesheet"

问题描述

我有一个由 React.js 和 typescript 制作的多语言 Web 项目，并且想使用 bootstrap 5 CSS。问题是我想根据语言（ltr 或 rtl）动态更改 head 部分的引导 CSS 链接。

public/index.html 文件中的这个链接：

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

动态转换为：

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

更改语言后，我想修改 rtl 或 ltr 的 CSS 链接。我正在使用 rout 方法并成功更改 HTML 目录，但希望使用 React.js 和 TypeScript 进行修改。

有什么解决办法吗？

标签： reactjs

解决方案

你可以通过使用 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

推荐阅读