React 中 map() 默认渲染为垂直排列，是因为 <div> 是块级元素；需通过 CSS（如 display: flex 或 inline-block）配合唯一 key 属性，才能实现横向可滚动的电影卡片布局。
react 中 `map()` 默认渲染为垂直排列，是因为 `
` 是块级元素；需通过 css（如 `display: flex` 或 `inline-block`）配合唯一 `key` 属性，才能实现横向可滚动的电影卡片布局。
要让电影列表横向展示并支持滚动（而非默认的纵向堆叠），关键在于两方面：React 渲染规则与CSS 布局控制。
首先，修复控制台警告：Each child in a list should have a unique "key" prop.
key 是 React 识别列表项变化的必需标识，不能省略。推荐优先使用数据本身的唯一 ID（如 movie.imdbID），而非 index——仅当确保列表顺序固定且无增删时才用 index 作为兜底方案：
function MovieList({ movies }) {
return (
<div className="movie-grid">
{movies.map((movie) => (
<div key={movie.imdbID} className="movie-card">
<img src={movie.Poster} alt={movie.Title} loading="lazy" />
</div>
))}
</div>
);
}其次，解决“列显示”问题：默认 <div> 是 display: block，天然独占一行。要实现横向布局，推荐使用 Flexbox ——语义清晰、响应友好、易于滚动控制：
.movie-grid {
display: flex;
gap: 16px; /* 卡片间距 */
overflow-x: auto; /* 启用水平滚动 */
padding: 8px 0; /* 防止滚动条遮挡内容 */
scroll-behavior: smooth; /* 平滑滚动（可选） */
}
.movie-card {
flex: 0 0 auto; /* 不伸缩、不缩小，宽度由内容决定 */
width: 180px; /* 推荐设置固定宽高比，避免布局抖动 */
height: 270px;
}
/* 可选：隐藏滚动条（保持简洁 UI） */
.movie-grid::-webkit-scrollbar {
display: none;
}
.movie-grid {
-ms-overflow-style: none;
scrollbar-width: none;
}⚠️ 注意事项：
- ✅ 始终为 map() 的每个子元素提供 key，且 key 必须在兄弟节点中唯一；
- ❌ 避免在 key 中使用 Math.random() 或 Date.now()，会导致不必要的重渲染；
- ✅ 使用 flex: 0 0 auto + 明确尺寸，比 inline-block 更可控，且天然支持 gap 和对齐；
- ✅ 添加 loading="lazy" 提升首屏性能；alt 属性应使用有意义的文本（如 movie.Title），而非泛化的 "movie"；
- ? 若需响应式（如小屏单列、大屏多列），可结合 flex-wrap 与媒体查询，但横向滚动布局通常适用于固定行数+无限滚动场景。
最终效果：电影海报将水平排列，容器支持平滑拖拽/滚轮/触控滑动，符合流媒体应用常见的「横向浏览」交互范式。
