React中如何根据页面组件动态定位Hide Books按钮

在React应用中渲染书籍图片列表时出现按钮定位异常：

• 异常表现：移除单个书籍项时，Hide Books按钮会移动到被删除组件所在位置
• 预期效果：Hide Books按钮默认位置固定，仅当整行书籍都被删除时，才沿Y轴动态调整垂直位置
• 应用初始状态：
  
• 移除单个书籍项后的异常状态：
  

当前存在问题的app.js实现代码：

return(
<div style={{ position: "relative", minHeight: "100vh" }}>
          <button
            style={{
              position: "absolute",
              bottom: "",
            }}
            onClick={clearBooks}
          >
            Hide Books
          </button>
        </div>
)

按钮设置了position: absolute但没有配置明确的定位锚点（bottom属性为空值），此时绝对定位元素会跟随最近相对定位父元素内的文档流变化偏移。单本书删除会触发书籍列表的网格布局重排，布局变化会直接干扰无锚点的绝对定位元素，最终导致按钮错位到被删除项的位置。

放弃脱离文档流的绝对定位写法，让按钮跟随正常文档流排布即可，实现逻辑非常简单：

• 给书籍列表外层设置固定列数的网格布局，列数匹配你的UI设计（比如每行放4本书就设4列），网格容器高度会随内部书籍项的行数自动变化
• 将Hide Books按钮作为网格容器的同级元素，直接放在网格容器下方，不需要加任何特殊定位属性
• 效果自动符合预期：单本书删除没有减少整行时，网格容器高度不变，按钮位置完全固定；当整行书籍被删完，网格容器高度缩减，按钮会自然沿Y轴上移，不需要额外写位置监听逻辑。

修改后的可参考代码：

return(
  <div style={{ minHeight: "100vh", padding: "24px" }}>
    {/* 书籍列表网格容器 */}
    <div 
      style={{
        display: "grid",
        // 按照你的设计需求调整每行展示的书籍数量，示例为每行4本
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: "20px",
        marginBottom: "24px"
      }}
    >
      {books.map(book => (
        // 替换为你自己的单本书籍项组件
        <BookItem key={book.id} book={book} onRemove={handleRemoveBook} />
      ))}
    </div>
    {/* 按钮跟随正常文档流，放在网格下方即可 */}
    <button onClick={clearBooks}>
      Hide Books
    </button>
  </div>
)

如果有特殊场景必须使用绝对定位，需要额外通过ResizeObserver监听书籍列表容器的高度变化，动态给按钮设置top偏移值，这种方案维护成本更高，非必要不推荐。

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