如何实现超出 div 边界时自动展示滑动条?
当子组件 subcontainer 的 props.data 内容过多,超出父组件 div 的界面时,如何添加滚动条以实现上下拖动查看呢?
在 subcontainer 函数返回的 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> );
这样,当子组件内容超出 div 边界时,将会自动展示滑动条,允许用户上下拖动以查看剩余内容。