React.js 步进器答案

【问题标题】：React.js stepperReact.js 步进器
【发布时间】：2017-01-15 09:25:59
【问题描述】：

您好，我正在尝试构建我的页脚，它基本上是一个步进器，可以通知用户他们在应用程序中的位置。

页脚（步进器）组件：

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>
  );
 }
}

我想制作包装图像的 div 以根据路线更改背景颜色

我将页脚组件添加到其他视图：

<Footer />

我正在使用 react-router

你能建议我应该走的路吗？也非常欢迎任何建议。谢谢

【问题讨论】：

标签： reactjs ecmascript-6 react-router uistepper

【解决方案1】：

您可以将路径存储在减速器的状态中。在您的页脚中获取该状态并添加第二种样式，具体取决于路径是否是步进器步骤中的好路径。

【讨论】：