如何根据页面组件动态定位按钮？

Question

在 React 应用程序中，我正在显示图像列表。当单独的书被删除时，Hide Books 按钮将取代该组件。

我想要实现的是Hide Books 按钮应保持在同一位置，如果整行书被删除，则应动态更改其在y axis 上的位置

应用的初始状态

当个别书籍被删除时 -

app.js

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

Answer 1

你能分享更多你的代码吗？也许有一个codesandox的例子？这似乎是一个样式问题，但如果没有更多代码就很难判断。

-编辑-

您的按钮应该与您的图书列表分开，这就是它基本上“跟随”您最后一张图书卡片的原因。

尝试做这样的事情

return (
  <section className='wrapper'>
    <div className='bookList'>
      {booksData.map(book => {
         //code your books here
      }
    </div>
    //then put your button out of the div
    <button onClick={function}>hide books</button>
  </section>
)

你的包装器 div 的 CSS 可能是这样的

.wrapper{
  display: flex;
  flex-direction: column
}

这样您将首先拥有书籍，然后按钮将显示在列表下方

Answer 2

将按钮作为 Books 的 section 的下一个兄弟。如下图所示。我所做的只是将按钮移出该部分。您必须使用填充等为按钮设置样式以更新布局。

// in index.js, BookList

  return (
    <>
    <section className="booklist">
      {booksData.map((book, index) => {
        return (
          <Book
            key={index}
            {...book}
            removeIndividualBook={removeIndividualBook}
          ></Book>
        );
      })}
    </section>
      {booksData.length === 0 ? (
        <button onClick={handleShowBook}>Show Books</button>
      ) : (
        <div style={{ position: "relative", minHeight: "100vh" }}>
          <button
            style={{
              // position: "absolute",
              // marginTop: "2350px",
              // marginLeft: "28px",
              position: "absolute",
              //left: "12%",
              bottom: "",
            }}
            onClick={clearBooks}
          >
            Hide Books
          </button>
        </div>
      )}
    </>
  );