Reactjs 如何只加载每个组件所需的CSS（React js）

我已经开始编写我的第一个React应用程序，它非常棒，但我不知道如何管理每个组件的css文件（因此，如果没有必要，实际的css将不会加载）

React with webpack（如果我错了，请纠正我）以这样一种方式包装项目：在每个给定的时刻，应用程序只加载它需要的内容（以JS的形式）

因此，如果我的主

App

组件只有两个按钮可见：

btn-01

和

btn-02

，而在这个组件内部，我还有另外两个：

component-01

和

component-02

，它们被隐藏，直到单击相应的按钮（

component-01

），在单击实际按钮之前，不会加载这些组件（我是否理解正确？），即使没有单击任何按钮

我不太喜欢内联样式，但我确实用

css模块

对其进行了测试，但结果在这方面是相同的。所以我甚至不确定这是否可以用一种简单的方式实现

这里有一个代码，所以可能我没有正确地实现它，但请不要介意非干式代码等

因此，正如您所看到的，

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;

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;

---

您可以在react中使用样式化组件这限制了组件的样式范围这里有一个链接谢谢@adel，但我不喜欢内嵌样式，即使在js中使用css，出于各种原因，我更喜欢使用css（sass）。使用react.lazy（）可能会有帮助：使用它来延迟加载组件。不确定CSS是否也会延迟加载，但值得一试。你可以使用样式化组件进行react。它限制了组件的样式范围。这里有一个链接谢谢你@adel，但我不喜欢内嵌样式，即使在js中使用CSS，出于各种原因，我更喜欢使用CSS（sass）。使用react.lazy（）可能有帮助：使用它来延迟加载组件。不确定CSS是否也会延迟加载，但值得一试