手机上的react-bootstrap轮播隐藏控件

问题描述

我想隐藏移动设备上的控件，但组件道具true中只有false或<Carousel controls={true}>个值。有什么办法可以通过react-bootstrap做到这一点？也许是另一种简单的方法？

解决方法

在安装组件时，您可以检查以查看设备尺寸。之后，评估Carousel controls是否需要false（在小型设备上）或true（在大型设备上）。

例如功能组件：

function App(){
  const [controlsAreVisible,setControlsAreVisible] = useState(true);

  useEffect(()=>{

    // iPhone X width,for example
    if (window.innerWidth <= 375) {
      setControlsAreVisible(false)
    }

    // you can also set up event listeners here for "resize" for full responsiveness

  },[])

  return(
    <Carousel controls={controlsAreVisible}>
    ...
  )
}