有效设计样式反应组以便与sidenav

问题描述

我正在制作一个带有侧面导航的页面。此侧面导航中包含一些不同的组件。

现在我可以正常工作了，但是看起来很糟糕。

对于每个过渡，我都添加了样式，我宁愿全局设置一个样式以最小化代码。我已经尝试了通过连接的CSS文件并使用所有过渡设置在文件中创建全局对象属性的方法。

这就是我所拥有的

这是用于渲染侧面导航部分的功能。 然后将它们设置为动画

renderSidebar() {
   //default style of transtions
 
    return (
       <> 
      <Transition in={this.state.showHome} timeout={1000} classnames ="alerts">
      {state => (
       <div  
        style={{
         width: "35%",height: "90%",paddingTop: "10px",background: "white ",color: "black",textAlign: "center",transition: "all 1s ease",position: "absolute",bottom: 0,border: "1px solid #000000",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
          
  <a onClick={() => this.toggleShow(null)}  >x</a>
      <Home/> 
       </div>
      )}
     </Transition> 
     
     <Transition in={this.state.showFacilities} timeout={1000}>
      {state => (
       <div  
        style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
      <Facilities/> 
       </div>
      )}
     </Transition> 
     <ReactCsstransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {items}
        </ReactCsstransitionGroup>
     <Transition in={this.state.showSearch} timeout={1000}>
      {state => (
       <div
        style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
      <Search/>
       </div>
      )}
     </Transition>
     <Transition in={this.state.showAlerts} timeout={1000}>
      {state => (
       <div
        style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
       <Alerts/>
       </div>
      )}
     </Transition>
     <Transition in={this.state.showTracking} timeout={1000}>
      {state => (
       <div
        style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
       <Tracking/>
       </div>
      )}
     </Transition>
     <Transition in={this.state.showItinerarys} timeout={1000}>
      {state => (
       <div
        style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
       <Itinerary/>
       </div>
      )}
     </Transition>
     <Transition in={this.state.showAssets} timeout={1000}>
      {state => (
       <div
        style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
       <Assets/>
       </div>
      )}
     </Transition>
     <Transition in={this.state.showAnylitics} timeout={1000}>
      {state => (
       <div
        style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
       <Anayltics/>
       </div>
      )}
     </Transition>
    
     <Transition in={this.state.showReports} timeout={1000}>
      {state => (
       <div
        style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
       <Reports/>
       </div>
      )}
     </Transition>
     <Transition in={this.state.showSettings} timeout={1000}>
      {state => (
       <div
        style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}
       >
       <Settings/>
       </div>
      )}
     </Transition>
       
     </> 
    )
   }

所以本质上我只是想要它而不是每次转换。

 style={{
         width: "35%",//This is where all the magic happens <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/11/svg/1f642.svg">
         left: state === "entering" || state === "entered" ? 0 : "-50%"
        }}

我可以有这样的东西

 style={{presetStyle}}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）