如何在 React 中实现可滚动的超出容器？

在 react 中实现可滚动的超出容器

当你有一个子组件包含大量数据时，它可能会超出容器的边界。为了解决这个问题，你可以让溢出的内容在一个可滚动的滑条中展示，以便用户可以上下拖动查看。

以下是通过在容器中添加一行 overflow 属性来实现这一功能的步骤：

PHP5 和 MySQL 圣经

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。

下载

import React from 'react'

export type ItemType = {
    type: "property" | "method",
    value: string,
    selected?: boolean    
}

export type SubContainerProps = {
    height?: number,
    title: string,
    data: ItemType[], // 这个是items
}

export default function subContainer (props: SubContainerProps){ 

   

    return (
        zuojiankuohaophpcndiv style={{borderRadius: '8px',  border: '2px dashed #333', height: props.height, overflow: 'auto'}}youjiankuohaophpcn
            zuojiankuohaophpcndiv style={{textAlign: 'left'}}youjiankuohaophpcn
                zuojiankuohaophpcnlabelyoujiankuohaophpcn{props.title}zuojiankuohaophpcn/labelyoujiankuohaophpcn
            zuojiankuohaophpcn/divyoujiankuohaophpcn
            zuojiankuohaophpcndivyoujiankuohaophpcn
                {props.data.map((item, index) =youjiankuohaophpcn (
                    zuojiankuohaophpcndiv 
                        key={`${index}-${item.type}-${item.value} `} 
                        style={{ 
                            float: 'left', 
                            display: 'inline-block', 
                            borderRadius: '6px', 
                            border: '2px solid #000', 
                            margin: '8px', 
                            padding:'4px',
                            backgroundColor: item.selected ? '#39fe40': '' 
                        }}
                        
                    youjiankuohaophpcn{item.value}zuojiankuohaophpcn/divyoujiankuohaophpcn
                ))}
            zuojiankuohaophpcn/divyoujiankuohaophpcn
        zuojiankuohaophpcn/divyoujiankuohaophpcn
    )
}

overflow 属性的“auto”值允许元素在其内容超出边界时自动创建滚动条。这将使你的子组件的内容在超出容器时可滚动查看。