Css react.js媒体查询和转盘

目前正在使用React.js并使用媒体查询，除非另有解决方案。这是我一直尝试使用但似乎不起作用的链接：。
我的组件由旋转木马中的8个图像组成：。
我想在4张1600px宽的图片和2张IPad宽的图片上进行布局

---

和一张480px的图像。它们不应该堆叠。此媒体查询不适用于此转盘。如果您知道实现上述目标的解决方案，请让我知道。非常感谢

除非你打算在你的应用程序中随处可见，否则我建议不要包括一个新的库。通过从window.innerWidth中提取信息，可以有条件地渲染元素。这是我制作的小提琴，它应该能显示基本原理：

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
宽度：0
}
}
componentDidMount（）{
this.updateWidth（）；
window.addEventListener（'resize'，this.updateWidth.bind（this））
console.log（window.innerWidth）；
}
updateWidth（）{
this.setState（{width:window.innerWidth}）；
}
render（）{
console.log（this.state.width）
开关（真）{
本例为.state.width
class Hello extends React.Component {
    constructor(props){
    super(props);

    this.state = {
        width: 0
    }
  }

  componentDidMount(){
    this.updateWidth();
    window.addEventListener('resize', this.updateWidth.bind(this))
    console.log(window.innerWidth);
  }

  updateWidth(){
    this.setState({width: window.innerWidth});
  }

  render(){
  console.log(this.state.width)
    switch(true){
        case this.state.width<= 480:
        return (<div>This is a Phone</div>)
      case this.state.width<= 768:
        return(<div> This is an iPad</div>)
      default:
        return(<div> This is a computer</div>)
    }
  }
}