时间戳

首页 > 解决方案 > 如何根据屏幕宽度动态设置道具？

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

问题描述

我有下面的代码，其中我有一个组件是幻灯片的轮播（来自库 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>
    )
  }
};

以前有没有人遇到过这个问题或可以想到解决方案？

谢谢！

标签： javascriptreactjs

解决方案

您可以使用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 轮播，当它不匹配时，我们渲染 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>

    )

推荐阅读