React.js stepper

Question

안녕하세요 저는 기본적으로 사용자가 앱에있는 위치를 알려주는 스테퍼 인 바닥 글을 작성하려고합니다.

바닥 글 (스테퍼) 구성 요소 :

export default class Footer extends Component { 

    render() { 
    return (
     <MuiThemeProvider> 
     <div className="row"> 
      <div className="footer"> 
      <div className="container-fluid" style={containerStyle}> 
       <div className="col-sm-12"> 
       <div className="steps" style={stepStyle}><img src={trailerGray} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       <div className="steps" style={stepStyle}><img src={clockIcon} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       <div className="steps" style={stepStyle}><img src={shieldGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       <div className="steps" style={stepStyle}><img src={detailsGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       <div className="steps" style={stepStyle}><img src={detailsGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div> 
       </div> 
      </div> 
      </div> 
     </div> 
    </MuiThemeProvider> 
); 
} 
} 

나는 경로

에 따라 배경 색상을 변경할 이미지를 래핑 사업부를하고 싶다 그리고 내가 다른 뷰에 내 글의 구성 요소를 추가 :

<Footer />

나는 반응 라우터

사용하고 있습니다

내가 가야 할 길을 제안 해 주시겠습니까? 또한 모든 제안을 크게 환영합니다. 감사합니다

Answer 1

경로를 감속기의 상태로 저장할 수 있습니다. 바닥 글에 해당 상태를 가져 와서 스테퍼 단계에서 경로가 좋은지 여부에 따라 두 번째 스타일을 추가하십시오.