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

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>
)

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

.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>
      )}
    </>
  );

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

How can I position button dynamatically according to page components?

javascript

css

button

typescript

reactjs