css - react.js 媒体查询和轮播

Question

目前正在使用 React.js 并打算使用媒体查询，除非有其他解决方案。这是我一直在尝试使用但似乎不起作用的链接:https://www.npmjs.com/package/react-responsive .
我的组件由 8 张图像组成，带有轮播:https://github.com/leandrowd/react-responsive-carousel .
我想以 1600px 宽度布置 4 个图像，以 iPad 宽度布置 2 个图像 和 1 张 480 像素的图片。他们不应该堆叠。此媒体查询不适用于此轮播。如果您知道完成上述任务的解决方案，请告诉我。非常感谢!

Answer 1

除非您计划在您的应用程序中的任何地方合并它，否则我建议您不要包含一个新的库。您可以通过从 window.innerWidth 中提取信息来有条件地渲染元素。这是我制作的 fiddle ，应该显示基础知识:https://jsfiddle.net/Mikkal24/w837k9s7/

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