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

我想让包装图像的div根据路径改变背景颜色

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

<Footer />

我正在使用react-router

你能建议我应该选择一条路吗？也非常欢迎任何建议。谢谢

Answer 1

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

React.js步进器

1 个答案: