如何使用React在表格边框上放置通知提醒标识？

• 先给你要放置通知图标的表格元素（单元格/行容器）设置position: relative属性，作为定位锚点，不会影响原有布局结构。
• 封装独立的通知角标组件，通过绝对定位调整坐标，让它刚好落在边框交界处即可，如果需要放在两个相邻元素的中间，调整top/bottom/left/right的数值适配就行。
• 注意父容器不要设置overflow: hidden，避免定位超出容器范围的角标被截断。

代码示例 #

角标组件 #

const TableNotificationBadge = ({ count }) => {
  // 样式数值可根据设计需求调整
  return (
    <span style={{
      position: "absolute",
      top: -9,
      right: -9,
      width: 18,
      height: 18,
      borderRadius: "50%",
      background: "#ff4d4f",
      color: "#ffffff",
      fontSize: 11,
      display: "inline-flex",
      alignItems: "center",
      justifyContent: "center"
    }}>
      {count}
    </span>
  )
}

表格中使用示例 #

// 表格单元格/行容器内引用组件即可
const TableItem = () => {
  return (
    <div style={{ 
      position: "relative",
      border: "1px solid #e5e7eb",
      padding: "12px"
    }}>
      <TableNotificationBadge count={15} />
      表格内容
    </div>
  )
}

如果需要放在上下两个元素的中间边界，只需要把角标的top属性改成bottom: -9px即可，调整数值就能刚好卡在边框重叠的位置。

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