Как загрузить только необходимое CSS на компонент (React js) - PullRequest
Новая
       3

Как загрузить только необходимое CSS на компонент (React js)

1 голос
/ 01 августа 2020

Я начал кодировать свое первое приложение React, и оно потрясающее, но я не могу понять, как управлять css файлами для каждого компонента (поэтому фактический CSS не загружается, если в нем нет необходимости. ).

React with webpack (поправьте меня, если я ошибаюсь) оборачивает проект таким образом, что в каждый данный момент приложение загружает только то, что ему нужно (с точки зрения JS).

Итак, если у меня есть основной компонент App с видимыми только двумя кнопками: btn-01 и btn-02, а внутри этого компонента у меня есть еще два: component-01 и component-02, и они скрыты до тех пор, пока не будет нажата соответствующая кнопка (btn-01 для component-01), эти компоненты не будут загружены, пока не будет нажата фактическая кнопка (правильно ли я понимаю?), однако это не то же самое с css как Я могу сказать, потому что вижу css каждого из этих (component-01 и component-02) компонентов, загруженных сразу, App загружается, даже если ни одна из кнопок не нажата.

Я не большой поклонник встроенного стиля, но я тестировал его с помощью css module, но В этом аспекте результат такой же. Так что я даже не уверен, можно ли это реализовать простым способом.

Вот код, так что, возможно, я неправильно его реализую, но, пожалуйста, не обращайте внимания на отсутствие - DRY code et c.

Итак, как видите, стили Component-01 и -02 загружаются, даже если в них нет необходимости в данный момент (ни одна кнопка не нажата).

App.js

import React, { Component } from "react";
import "./App.css";
import Component_01 from "./Component-01/Component-01";
import Component_02 from "./Component-02/Component-02";

class App extends Component {
  state = {
    isComponent_01: false,
    isComponent_02: false,
  };

  toggleComponent01 = () => {
    this.setState({
      isComponent_01: !this.state.isComponent_01,
    });
  };

  toggleComponent02 = () => {
    this.setState({
      isComponent_02: !this.state.isComponent_02,
    });
  };

  render() {
    let showComponent_01 = null;
    if (this.state.isComponent_01) {
      showComponent_01 = <Component_01 />;
    }

    let showComponent_02 = null;
    if (this.state.isComponent_02) {
      showComponent_02 = <Component_02 />;
    }

    return (
      <div className="App">
        <button className="btn-01" onClick={this.toggleComponent01}>
          Btn-01
        </button>
        <button className="btn-02" onClick={this.toggleComponent02}>
          Btn-02
        </button>

        {showComponent_01}
        {showComponent_02}
      </div>
    );
  }
}

export default App;

Component-01.js (и Component-02.js, только с -02.js) 

import React from "react";
import style from "./Component-01.module.css";

function App() {
  return <div className={style["component-01"]}>Component-01</div>;
}

export default App;
...