Hello! 欢迎来到小浪资源网!


React组件内容超出div边界如何显示滚动条?


avatar
1986424546 2024-11-17 24

React组件内容超出div边界如何显示滚动条?

如何让超出 div 界面的内容显示滚动条

有一个这样的子组件:

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 (         <div style={{borderradius: '8px',  border: '2px dashed #333', height: props.height}}>             <div style={{textalign: 'left'}}>                 <label>{props.title}</label>             </div>             <div>                 {props.data.map((item, index) => (                     <div                          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': ''                          }}                                              >{item.value}</div>                 ))}             </div>         </div>     ) }

但当 props.data 中的内容较多时,会超出界面的显示范围。要解决这个问题,可以在该 div 中添加以下样式:

overflow: 'auto'

修改后的代码如下:

return (         <div style={{borderRadius: '8px',  border: '2px dashed #333', height: props.height, overflow: 'auto'}}>             <div style={{textAlign: 'left'}}>                 <label>{props.title}</label>             </div>             <div>                 {props.data.map((item, index) => (                     <div                          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': ''                          }}                                              >{item.value}</div>                 ))}             </div>         </div>     )

这样,当内容超出界面范围时,就会出现滚动条,以便上下拖动进行查看。

相关阅读