反应:仅在渲染组件时加载组件的CSS
问题描述:
# 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?反应:仅在渲染组件时加载组件的CSS
答
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
}
}