React JS + Material UI中的Swiper Slider实现

时间:2017-11-22 20:36:01

标签: javascript reactjs slider material-ui

我有以下应用程序架构:

1个父组件和4个子组件,每个组件都根据父组件的状态激活

<Tabs>
      <Tab
        icon={<EuroLogo />}
        onActive={()=>this.setState({page:1})}
        label="price"
        style={stylesTab}
      />
      <Tab
        icon={<LocationLogo />}
        onActive={()=>this.setState({page:2})}
        label="distance"
        style={stylesTab}
      />
      <Tab
        icon={<FuleLogo />}
        onActive={()=>this.setState({page:3})}
        label="fule"
        style={stylesTab}
      />
      <Tab
        icon={<DataLogo />}
        onActive={()=>this.setState({page:4})}
        label="data"
        style={stylesTab}
      />
</Tabs>

render()如下:

<div>
      {
      (() => {  switch(this.state.page){
          case 1: {
             return <Price/>
           } break;
          case 2: {
             return <Distance/>
           } break;
          case 3: {
            return <Fuel/>
          } break;
          case 4: {
            return <Options/>
          } break;
        }

      }
    )()}
</div>

页面更改基于父state.page

的值

我的问题是,如何实现反应滑块。我在网上搜索了信息,但没有找到任何文档或视频..对于ReactJS WEB

P.S。很抱歉没有“确切/详细的问题”问题,但如果有人帮助我,或者链接我一些文档或视频,我会非常感激:)

0 个答案:

没有答案