Question

我有以下代码，其中有一个组件是幻灯片轮播（来自库nuka-carousel）。我希望当屏幕宽度低于特定水平（729px）时，属性slideWidth = {0.5}为slideWidth = {1}，这样，当屏幕变小时，而不是一次看到多个幻灯片，看到一个。

我尝试使用媒体查询，但是找不到根据样式设置属性的方法。

import React from 'react'
import Carousel from 'nuka-carousel'

class Quotes extends React.Component {

  state = {
    slideIndex: 0,
  };

  render() {

    return (
      <Carousel slideWidth={0.5}>
         {this.props.slides.map(slide => (
             <Slide>
                .... Content ....
             </Slide>
         ))}
      </Carousel>
    )
  }
};

有人有过这个问题吗？还是可以想到解决方案？

谢谢！

Answer 1

您可以使用matchMedia API，就像对JS进行媒体查询一样-您可以使用断点设置一个并更改JS变量，这将使您可以有条件地根据需要呈现轮播：

var mediaQueryList = window.matchMedia('(min-width: 729px)');

    return (
      { mediaQueryList.matches && //matches
        <Carousel slideWidth={0.5}>
         {this.props.slides.map(slide => (
             <Slide>
                .... Content ....
             </Slide>
         ))}
        </Carousel>
      }
      { !mediaQueryList.matches && //doesn't match
        <Carousel slideWidth={1}>
         {this.props.slides.map(slide => (
             <Slide>
                .... Content ....
             </Slide>
         ))}
        </Carousel>
      }
    )

所以这里的想法是，当MQ匹配时，我们渲染0.5转盘，而当MQ不匹配时，我们渲染1转盘。您还可以根据需要设置回调并控制变量的值：

function handleWidthChange(evt) {
  if (evt.matches) {
    /* The viewport is currently wide */
    myVariable = 0.5;
  } else {
    /* The viewport is currently narrow */
    myVariable = 1;
  }
}
mediaQueryList.addListener(handleWidthChange); // Add the callback function as a listener to the query list.

handleWidthChange(mediaQueryList);//call it

    return (
        <Carousel slideWidth={ myVariable }>
         {this.props.slides.map(slide => (
             <Slide>
                .... Content ....
             </Slide>
         ))}
        </Carousel>

    )

如何根据屏幕宽度动态设置道具？

1 个答案: