React映射组件仅第二个按钮可点击，求问题原因分析

问题场景 #

练习React基础时，通过数组映射渲染TextItem组件，页面显示两个组件实例，但只有第二个组件的按钮能触发点击事件，第一个按钮完全无响应。

原因分析 #

问题根源在TextItem组件的样式设置：

• 组件内的DivFlex样式设置了固定的height: 600px，且两个TextItem组件默认上下紧密排列，没有间距。
• 第二个组件的元素区域会覆盖在第一个组件的按钮上方，导致点击第一个按钮的位置时，实际触发的是第二个组件的空白区域，第一个按钮的点击事件无法被触发。

解决方案 #

给DivFlex添加底部间距，让两个组件分开排列，避免重叠：

// TextItem.js中修改DivFlex样式
const DivFlex = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 600px;
  margin-bottom: 2rem; /* 添加底部间距 */
`;

也可以检查Card组件的样式，如果Card使用了绝对定位，需改为相对定位或调整布局逻辑，确保组件不会相互覆盖。

修改后，两个组件会正常上下排列，第一个按钮不再被遮挡，点击事件可以正常触发。

内容的提问来源于stack exchange，提问作者VictorBlanco