@芥末的糖-----左右滑动的实现

1.在父组件中

根据我们点击的不同，来修改state的值，传给兄弟组件，然后通过组件props接受的不同来改变样式

   this.state = {
      dir: 'left',
      activeDir: 'left'
    }

      <MenuNav>
          <MenuNavItem 
              onClick={() => this.handleNavClick('left')}
              active={this.state.activeDir === 'left'}
            >
              分类
            </MenuNavItem>
            <MenuNavItem 
              onClick={() => this.handleNavClick('right')}
              pos="right"
              active={this.state.activeDir === 'right'}
            >
              食材
            </MenuNavItem>
            <MenuNavSlider dir={this.state.dir}></MenuNavSlider>
      </MenuNav>

1.1styled-component里面接受props

//两个定位的div
const MenuNavItem = styled.div `
  height: 100%;
  width: 50%;
  text-align: center;
  line-height: .3rem;
  position: absolute;
  color: ${ props => props.active ? '#ee7530' : '#fff' };
  z-index: 1;
  left: ${ props => props.pos !== 'right' ? 0 : '' };
  right: ${ props => props.pos === 'right' ? 0 : '' };
`
//滑块
const MenuNavSlider = styled.div `
  position: absolute;
  border-radius: .15rem;
  background: #fff;
  left: ${ props => props.dir === 'left' ? 0 : '50%'};
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 0;
  transition: all .3s ease-in;
`

总结

我们可以在不使用第三方的组件情况下，自己造轮子......通过state的改变来改变状态和样式。