
超出 div 界面时的滑条展示
当子组件 <pre>subcontainer</pre> 中的 <pre>data</pre> 内容过多时,它需要通过溢出滚动 <pre>overflow: 'auto'</pre> 来展示。
修改后的代码如下:
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>
);通过添加 <pre>overflow: 'auto'</pre>,当内容超出 <pre>div</pre> 界面时,它将允许垂直滚动,从而可以上下拖动滑条来展示内容。










