React 中如何让超出 div 界面后启用可上下拖动滑条？

有志者，事竟成！如果你在学习文章，那么本文《React 中如何让超出 div 界面后启用可上下拖动滑条？》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

react 中超出 div 界面并启用滑条滚动

在 react 中，当某个元素的内容超出父元素的边框时，可以使用 overflow 属性来控制它的显示方式。下面是如何让超出 div 界面后启用可上下拖动滑条：

在 subcontainer 组件中，添加以下样式：

overflow: 'auto'

更新后的代码如下：

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 (
        

            

                {props.title}
            
            

                {props.data.map((item, index) => (
                    
{item.value}
                ))}
            
        
    )
}

通过添加 overflow: 'auto'，如果子元素超出父元素，将显示垂直滚动条，允许用户滚动查看剩余内容。

理论要掌握，实操不能落！以上关于《React 中如何让超出 div 界面后启用可上下拖动滑条？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！