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


React组件内容溢出如何用滚动条解决?


React组件内容溢出如何用滚动条解决?

超出 div 界面时显示滚动条的解决方案

现有一个子组件,当props.data的内容过多时会导致溢出界面,需求是当内容超出div界面时,显示一个滚动条以便上下拖动查看内容。

解决方案:

在 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> );

相关阅读