当前位置: 首页 > 知识库问答 >
问题:

在JavaScript/React中动态加载和卸载css文件内容

邢冷勋
2023-03-14

这几天来我一直在用我的头来对付它。我看了所有类似的问题,但它们不太符合我需要的。

我觉得很难相信没有人尝试过,或记录过,这之前,我想要一些想法,如何处理这一点。

要求
我正在为我的应用程序使用react引导程序,我想让用户在一组引导主题之间进行选择。为了保持简单,我目前只有一个光明和一个黑暗。这些样式是https://bootswatch.com/提供的scss,所以我不想尝试JS主题中的常见CSS方法。


理想情况下,我想要的是有条件地呈现/导入css文件的能力。我试过一些东西,其中大多数都不起作用,有一个可以起作用,但真的很糟糕。

我想要的是一种从css文件构造一个带有样式节点的DOM节点,而不是呈现它的方法。然后我可以将所有这些样式节点放入DOM中,并有选择地添加/移除它们。

理想情况下,我根本不需要手动更改DOM。我一直没能找到做这件事的方法。我希望style组件的条件呈现能起到作用,但这并不起作用,因为style从来不加载(超过第一次)或卸载(永远)。

我到目前为止所尝试的
使用惰性加载(工作方式)
我将css放在一个轻量级组件中,例如

import React from 'react';
import './_light.scss';
const Theme = React.forwardRef(( props, ref) => (<div ref={ref}></div>));
export default Theme;```

然后我懒得加载其中一个或在我的应用程序中,就像这样

const LightTheme = React.lazy(() => import('../themes/lightTheme'));
const DarkTheme = React.lazy(() => import('../themes/darkTheme'));

....

const element = (chosenTheme === PreferredTheme.LIGHT) ?
        <LightTheme /> : <DarkTheme />

...


 return (
        <ThemeContext.Provider value={initialValue}>
            <React.Suspense fallback="{<></>}">
                {element}
            </React.Suspense>
            {children}
        </ThemeContext.Provider>
    )

问题是,我给了用户切换主题的选择,似乎发生了两个问题:1)一旦两个都加载了(一次),他们就不会再加载;2)样式节点的顺序很重要,所以无论哪一个最后加载都会一直保持活动状态。

通过在我的useEffect中执行一些hacky节点操作,将(不再使用的样式)/添加(要应用的)样式节点删除到DOM,我能够解决这一问题,但这充其量也是hacky的。

useRef
要获得对每个样式节点的引用,请将其保存到一个dict中,然后将其删除。这是以一种有趣的方式中断的,其中引用在第一次呈现时起作用,但在随后的呈现中,引用变成未定义

动态创建样式表
这里的解决方案看起来很有希望如何动态加载/卸载css。问题是我不知道如何在这个场景中找到样式表的inner text。正如我所说的,它是作为scss运来的,所以它得到了预处理,我甚至不知道如何才能得到文本。

任何想法或解释都非常感谢。

共有1个答案

钱华晖
2023-03-14

为什么不将主题指定为应用程序顶层元素的类,并使用CSS变量构建CSS类呢?

#app.dark {
  --app-bg: black;
  --app-fg: white;
}
#app.light {
  --app-bg: white
  --app-fg: black;
}
#app {
  background-color: var(--app-bg);
  color: var(--app-fg);
}

您确实可以使用一个更高阶的组件来包装您的UI,并根据所选主题更改它,并且使用Webpack进行延迟加载(如果值得的话)。FWIW,我的经验是黑暗/光明主题是最容易和最清楚的处理如上。

 类似资料:
  • 我知道如何加载CSS。 怎么卸载?

  • 本文向大家介绍使用javaScript动态加载Js文件和Css文件,包括了使用javaScript动态加载Js文件和Css文件的使用技巧和注意事项,需要的朋友参考一下 JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明。 希望下面的方法对你有帮助。 (1)使用JavaScript动态加载Js文件 (2)使用JavaScript

  • 问题内容: 我正在编写一个具有静态外部“外壳”和动态内容部分的Web应用程序。用户浏览系统时,动态内容部分具有许多更新。加载新的内容块时,还可以选择加载另一个JavaScript文件。我以良好的内务管理名义,从DOM中删除了适用于旧内容块的脚本块,因为不再需要JavaScript。 接下来是问题,当我意识到尽管我已经从DOM中删除了该元素,但是先前评估过的JavaScript仍然可以执行。这当然是

  • 问题内容: 如何可靠,动态地加载JavaScript文件?这将用于实现模块或组件,该模块或组件在“初始化”时将根据需要动态加载所有需要的JavaScript库脚本。 使用该组件的客户端不需要加载实现该组件的所有库脚本文件(并将标记手动插入其网页),只需加载“主”组件脚本文件即可。 主流JavaScript库如何做到这一点(原型,jQuery等)? 这些工具是否将多个JavaScript文件合并到脚

  • 问题内容: 我正在开发Web应用程序。我正在使用AngularJS将所有文件动态加载到UI中。 我有一个文件,可在单击或加载时将所有文件动态加载到其中。 现在我的登录页面看起来像下面的结构 现在我的问题是,尽管我能够加载手风琴的menu.html文件,但是却无法加载它所依赖的css和js文件。我已经研究了stackoverflow,但是没有一个对我有用。 任何人都可以帮助确定使用AngularJS

  • 问题内容: 我有一个非常大的javascript文件,仅当用户单击某个按钮时才想加载。我正在使用jQuery作为框架。有内置的方法或插件可以帮助我做到这一点吗? 更多详细信息:我有一个“添加注释”按钮,该按钮应该加载TinyMCE javascript文件(我已经将所有TinyMCE东西都煮成了一个JS文件),然后调用tinyMCE.init(…)。 我不想在初始页面加载时加载它,因为不是每个人都