反應：僅在渲染組件時加載組件的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 
    } 
}