反应：仅在渲染组件时加载组件的CSS

Question

# MyComponent.js 

import React from 'react' 
import './MyComponentStyle.css' 

export default class MyComponent extends React.Component { 
    .... 
} 


# App.js 

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Route, Switch, BrowserRouter } from 'react-router-dom' 
import MyComponent from './MyComponent' 
import PageNotFound from './PageNotFound' 

ReactDOM.render(
    <BrowserRouter> 
    <Switch> 
     <Route exact path='/mycomponent' component={MyComponent}/> 
     <Route component={PageNotFound} /> 
     </Switch> 
    </BrowserRouter>, 
    document.getElementById('root')); 

当我去/mycomponent MyComponent使用其CSS呈现。但是，当我去任何其他的网址，MyComponentStyle.css仍然可以在html的头部看到。只有在组件在其路由上呈现时，才有办法呈现相应的组件CSS？

Answer 1

Webpack v2通过import()引入了一项名为dynamic import的功能。您可以将您的CSS导入移动到render或componentWillMount方法中，由布尔变量保护，以确保只加载一次。

import React from 'react' 

let cssLoaded = false; 

export default class MyComponent extends React.Component { 
    render() { 
     if (cssLoaded === false) { 
      cssLoaded = true; 
      import('./MyComponentStyle.css'); 
     } 

     // other stuff 
    } 
}