调整窗口大小时对每行的更改项做出反应答案

【问题标题】：React change item per row when resizing the window调整窗口大小时对每行的更改项做出反应
【发布时间】：2021-06-04 01:09:32
【问题描述】：

调整窗口大小时如何更改每行的项目或是否有任何插件？例如：

在电脑上：

<div class="row">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
</div>

在平板电脑上：

<div class="row">
  <div>item 1</div>
  <div>item 2</div>
</div>
<div class="row">
  <div>item 3</div>
  <div>item 4</div>
</div>

在移动端

<div class="row">
  <div>item 1</div>
</div>
<div class="row">
  <div>item 2</div>
</div>
<div class="row">
  <div>item 3</div>
</div>
<div class="row">
  <div>item 4</div>
</div>

【问题讨论】：

这个回答你的问题stackoverflow.com/questions/19014250/… ?
这能回答你的问题吗？ Flexbox responsive row column layout
不，不是@AidanHakimian。我的意思是换一个新行。您可以在此处查看示例网站 canva.com (canva.com/photos)
@Dani 你可以在这里看到一个例子（canva.com/photos）
需求不是需要改变jsx模板中元素排列方式的东西。它只需要一个带有适当@media 查询的 div 样式来选择不同的屏幕尺寸。像 bootstrap 和 material 这样的库提供了简单的弹性框类，比如 col-sm col-md col-lg .. 请看一下

标签： reactjs plugins grid components

【解决方案1】：

你可以试试这样的，你应该自己定义尺寸

const Component = (props) => {
    const [screenSize, setScreenSize] = useState(1024);

    useLayoutEffect(() => {
        setScreenSize(window.innerWidth);
        window.addEventListener('resize', () => setScreenSize(window.innerWidth));
        return () => window.removeEventListener('resize', () => setScreenSize(window.innerWidth));
    }, []);

 if(screenSize <= 480) {
    return <div className="mobile"></div>
 }
 if(screenSize > 480 && screenSize <=  640) {
    return <div className="mobile-landscape"></div>
 }
 if(screenSize > 480 && screenSize <=  640) {
    return <div className="mobile-landscape"></div>
 }
 if(screenSize > 640 && screenSize <=  1024) {
    return <div className="tablets"></div>
 }
 // desktop
 return <div className="desktop"></div>
}

【讨论】：