Question

我使用以下代码导入css

cacerts

如何在组件未使用时从反应中删除导入的css。当我回到上一个屏幕时，这个css会在那里应用。有什么想法吗？

UPDATE :: Webpack config

componentWillMount() {
    import('./patient-summary.css');
}

Answer 1

首先，AFAIK，你不应该在componentWillMount中调用任何导入。这意味着每次要安装新组件时，都会反复加载此css。相反，它必须放在模块的开头。

避免不必要的css导入的方法是避免不必要的组件导入。因此，如果您的组件未在任何地方调用，则不会加载此css。

对于路由，我认为您需要进行一些代码拆分，但我不确定它是否是直接或正确的方法。

Link 1 Link 2

Answer 2

我在 React 中找到了一种（某种）合理的方法来做到这一点。简而言之，您可以使用包含 import './style.css' 的 lazy-load React components，并且当它加载时，您可以捕获导入的 StyleSheet 以稍后切换其 StyleSheet.disabled 属性。

这是主要代码，下面有更多解释。这是我的 Gist。

`useDisableImportedStyles.tsx`

import { useEffect } from 'react'

// global list of all the StyleSheets that are touched in useDisableImportedStyles
const switchableGlobalStyleSheets: StyleSheet[] = []

// just to clarify what createUseDisableImportedStyles() returns
type useDisableImportedStyles = () => void

export const createUseDisableImportedStyles = (
    immediatelyUnloadStyle: boolean = true
    // if true: immediately unloads the StyleSheet when the component is unmounted
    // if false: waits to unloads the StyleSheet until another instance of useDisableImportedStyles is called.This avoids a flash of unstyled content
): useDisableImportedStyles => {
    let localStyleSheet: StyleSheet
    return () => {
        useEffect(() => {

            // if there are no stylesheets, you did something wrong...
            if (document.styleSheets.length < 1) return

            // set the localStyleSheet if this is the first time this instance of this useEffect is called
            if (localStyleSheet == null) {
                localStyleSheet = document.styleSheets[document.styleSheets.length - 1]
                switchableGlobalStyleSheets.push(localStyleSheet)
            }

            // if we are switching StyleSheets, disable all switchableGlobalStyleSheets
            if (!immediatelyUnloadStyle) {
                switchableGlobalStyleSheets.forEach(styleSheet => styleSheet.disabled = true)
            }

            // enable our StyleSheet!
            localStyleSheet.disabled = false

            // if we are NOT switching StyleSheets, disable this StyleSheet when the component is unmounted
            if (immediatelyUnloadStyle) return () => {
                if (localStyleSheet != null) localStyleSheet.disabled = true
            }

        })
    }
}

警告：这非常挑剔。您必须准确设置，否则可能会出现意想不到的后果

条件：

createUseDisableImportedStyles 必须在与目标导入的 css 和要延迟加载的组件相同的 tsx 文件中的全局范围内调用

import React from 'react'
import { createUseDisableImportedStyles } from './useDisableImportedStyles'
import './global-styles.css'
const useDisableImportedStyles = createUseDisableImportedStyles()
export const CssComponent: React.FC<{}> = () => {
    useDisableImportedStyles()
    return null
}
export default CssComponent

使用这个钩子的组件应该延迟加载：

LazyCssComponent = React.lazy(() => import('./cssComponent'))
...
<React.Suspense fallback={<></>}>
    {condition && <LazyCssComponent/>}
</React.Suspense>

延迟加载的一个例外可能是在单个普通非延迟组件中使用它，以便在第一次渲染时加载样式

注意：InitialCssComponent 永远不需要实际渲染，它只需要导入
但是：这仅在全局导入一个 .css 文件时才有效，否则，我不知道会发生什么

import InitialCssComponent  from './initialCssComponent'
LazyCssComponent = React.lazy(() => import('./cssComponent'))
//...
{false && <InitialCssComponent/>}
<React.Suspense fallback={<></>}>
    {condition && <LazyCssComponent/>}
</React.Suspense>

祝你好运！

如何在reactjs中删除导入的css

2 个答案:

`useDisableImportedStyles.tsx`

条件：