Question

目前正在使用React.js并使用媒体查询，除非有另一种解决方案。这是我一直试图使用的链接，但似乎不起作用：https://www.npmjs.com/package/react-responsive 我的组件由8个带旋转木马的图像组成：https://github.com/leandrowd/react-responsive-carousel 我希望将图像布置在宽度为1600px的4处和IPad宽度处的2张图像处和480像素的1张图像。他们不应该堆叠。此媒体查询对我来说不适用于此轮播。如果您知道完成上述任务的解决方案，请告诉我。非常感谢！

Answer 1

除非你打算在你的应用程序中随处可见，否则我建议不要包含新的库。您可以通过从window.innerWidth中提取信息来有条件地渲染元素。这是我制作的应该展示基础知识的小提琴：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>)
    }
  }
}

react.js媒体查询和轮播

1 个答案: