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

我有下面的代码，其中我有一个组件，它是幻灯片的旋转木马（来自nuka旋转木马库）。当屏幕宽度低于某个级别（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>
    )
  }
};

从“React”导入React
从“努卡旋转木马”导入旋转木马
类引用扩展了React.Component{
状态={
幻灯片索引：0，
};
render（）{
返回(
{this.props.slides.map（slide=>(
……内容。。。。
))}
)
}
};

以前有没有人遇到过这个问题，或者能想出解决办法

谢谢

您可以使用类似于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>
      }
    )

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>

    )

var mediaQueryList=window.matchMedia（'（最小宽度：729px）'）；
返回(
{mediaQueryList.matches&&//matches
{this.props.slides.map（slide=>(
……内容。。。。
))}
}
{！mediaQueryList.matches&&//不匹配
{this.props.slides.map（slide=>(
……内容。。。。
))}
}
)

所以这里的想法是，当MQ匹配时，我们渲染0.5旋转木马，当它不匹配时，我们渲染1旋转木马。如果需要，还可以设置回调并控制变量的值：

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

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>

    )

功能手柄宽度变化（evt）{
如果（evt.匹配）{
/*视口当前较宽*/
myVariable=0.5；
}否则{
/*视口当前很窄*/
myVariable=1；
}
}
mediaQueryList.addListener（handleWidthChange）；//将回调函数作为侦听器添加到查询列表中。
handleWidthChange（mediaQueryList）//叫它
返回(
{this.props.slides.map（slide=>(
……内容。。。。
))}
)