Реагировать: загружать 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. Но когда я перехожу к любому другому URL-адресу, MyComponentStyle.css все еще можно увидеть в заголовке html. Есть ли способ отображать соответствующие компоненты CSS только тогда, когда компонент отображается на своем маршруте?


reactjs react-router css-loader webpack-2
person Falloutcoder    schedule 08.08.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Webpack v2 представил функцию под названием динамический импорт через 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
    }
}
person probablyup    schedule 08.08.2017