React之卡片拖拽移动

Posted 2023-05-03

参考技术A 管理页面我们通常能看到一连串的卡片，以很明显的方式对用户进行提示，也可以是图表嵌在卡片的形式直观展示。那就会存在一个需求，用户可以自定义自己想要的卡片布局，其实也就是自定义宽高这样。

可以看到这里监听了页面的 resize ，然后进行 onWindowResize 方法，我们在其他页面进行 resize 之后，也会触发这个方法，这也是我前面要强调一下路由切换不会 unmount 的原因，这里的 resize 没法得到正确的 node.offsetWidth ，所以样式错乱了，那怎么办呢？

首先我想着，在这个页面写一个时钟，不停的 js 去触发 resize 事件，让它在切换页面的时候重新计算，这样肯定是ok的，但是这样肯定会有性能问题，因为不停的延时调用，这样我就得想个办法，不那么频繁的刷新了，怎么做呢?

路由切换，页面也切换了，那组件肯定会触发 receiveProps 钩子，那我在这里判断一下当前页面的路由，如果是当前路由，那就刷新一下（dispatchEvent('resize'))，这样就做到只是进入这个页面就刷新，比时钟要好一些。但是这样还是很low，因为进入其他页面没有 resize 操作，只要返回这个页面就会刷新，接下来我就要优化一下，只有当其他页面 resize 了之后，回到当前页才 dispatchEvent('resize') 。

页面挂载的时候就进行 resize 监听，当发生 resize 事件之后进行一下路由判断，如果是其他页面，就改变 state 里的一个值，返回到当前页之后进行一下 state 的值判断，为 true 才刷新。

为了页面切换的时候更合理一些（不展示错乱的页面），加个 loading 延时一秒过度一下，还要记得 unmount 时去除掉 resize 监听。

这里的图表用的是 bizcharts ，它会监听页面 resize 的变化，但是当我们改变宽高的时候，发现没有自适应，一开始我的解决方法是把这个渲染的 canvas 设置为 width：100% ，这样能使它拉伸开，但是很丑，因为是相当于是放大，这样效果太不好了，所以也要解决这个问题。

React-Grid-Layout 组件有一个 props ， onResize 事件返回当前改变宽高这样的事件回调，我们在这个回调里手动触发一下页面 resize 事件，以实现 bizcharts 的自适应。

文章链接： https://www.npmjs.com/package/react-grid-layout

React strap 卡无法根据屏幕大小对齐项目

【中文标题】React strap 卡无法根据屏幕大小对齐项目

【英文标题】：React strap Cards unable to align items according to the screen size

【发布时间】：2020-09-28 07:30:25

【问题描述】：

我正在使用 React 卡片来显示动态卡片。我想在一行中显示 4 张用于桌面视图的卡片和 1 张用于移动视图的卡片，但它总是垂直显示，没有水平显示卡片

卡片的容器组件

    import React from 'react'
    import SongCard from '../SongCard'
    import 
        CardDeck
     from 'reactstrap';

    function Popular( popular ) 
        return (
            <div>
                popular.map((post) =>
                    <div key=post.etag>
                        
                            <CardDeck style=display: 'flex', flexDirection: 'row',justifyContent: 'right'>
                                <SongCard
                                    Title=post.snippet.title
                                    VideoId=post.id.videoId
                                    Image=post.snippet.thumbnails.high.url
                                    ChannelTitle=post.snippet.channelTitle />
                            </CardDeck>
                        
                    </div>)
                
            </div>
        )
    

    export default Popular

而卡片组件是

    import React from 'react'
    import 
        Card, CardImg, CardText, CardBody,
        CardTitle, CardSubtitle
     from 'reactstrap';

    function SongCard( Title, VideoId, Image, ChannelTitle ) 
        return (
            <div>
                <Card style=maxWidth:'30em',flex: '1'>
                    <CardImg top  src=Image  />
                    <CardBody>
                        <CardTitle>Title</CardTitle>
                        <CardSubtitle>ChannelTitle</CardSubtitle>
                        <CardText></CardText>
                    </CardBody>
                </Card>
            </div>
        )
    

    export default SongCard

【参考方案1】：

首先，在 SongCard 中，您可能不需要将卡片组件封装在 div 中，这会使您的 Card 样式不可用，因为 div 默认为全宽度。

其次，CardDeck 应该在地图循环之外，因为您为每个帖子创建一个新的 CardDeck，它可能不是您想要的。而是将“key=post.etag”直接放在 SongCard 中。

我也不建议在 CardDeck 的 style 中添加自定义样式，因为你会破坏所有设备的默认布局。

    import React from 'react'
import SongCard from '../SongCard'
import 
    CardDeck
 from 'reactstrap';

function Popular( popular ) 
    return (
        <CardDeck>
            popular.map((post) =>
                            <SongCard
                                key=post.etag
                                Title=post.snippet.title
                                VideoId=post.id.videoId
                                Image=post.snippet.thumbnails.high.url
                                ChannelTitle=post.snippet.channelTitle />
                </div>)
            
       </CardDeck>
    )


export default Popular

和

   import React from 'react'
import 
    Card, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle
 from 'reactstrap';

function SongCard( Title, VideoId, Image, ChannelTitle ) 
    return (
            <Card>
                <CardImg top src=Image  />
                <CardBody>
                    <CardTitle>Title</CardTitle>
                    <CardSubtitle>ChannelTitle</CardSubtitle>
                    <CardText></CardText>
                </CardBody>
            </Card>
    )


export default SongCard

【讨论】：

已编辑，有这样的新东西吗？