超出 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> );