Question

可以在 isVariable：true ？

时应用样式

我的意思是，是否可以根据React中的状态导入模块（模块1 +模块2）？

是否有可能使其正常工作？

import './style1.scss';
import './style2.scss';

class RenderApp extends Component {

    constructor(props){
        super(props)

        this.state = {
            isVariable: true
        }
    }

  setRole(){
    if (this.state.isVariable === false){
    this.setState({isVariable: true})
    }
    else if(this.state.isVariable === true){
      this.setState({isVariable: false})
    }
  }

    render() {
        return(
            <div>
              <Routing isVariable ={this.state.isVariable}/>
              <div className = "switcher">                   
                  <button className = "primary-button" onClick = {() => this.setRole()}> Test</button>
              </div>
            </div>
        )
    }
}

编辑

好吧，我在组件渲染中添加了

    this.state.isVariable 
    ?  import ("./styles1.css") 
    :  import ("./styles2.css")

当style2被“连接”时，可以取消导入style1吗？

问题在于设计系统会覆盖，并且在一次导入后，各个变量将保持其早期状态（h1等）

Answer 1

有一个stage 4 proposal。预计be published in 2020

它使您能够做到这一点：

isVariable ? import("./style1.css") : import("style2.css");

这是一个最小的工作应用程序： https://codesandbox.io/s/sad-lumiere-vtnhu

请注意，您不需要CSS。您可以设置className并在CSS中引用它：

<div className={isVariable ? "style1" : "style2"} />

导入模块取决于React状态

1 个答案: