0
189
Vistas¿Cómo puedo posicionar el botón dinámicamente según los componentes de la página?
En la aplicación React, estoy mostrando una lista de imágenes. Cuando se elimina un libro individual, el botón Hide Books ocupa el lugar de ese componente.
Lo que estoy tratando de lograr es que el botón Hide Books permanezca en la misma posición y cambie dinámicamente su posición en el y axis si se elimina toda la fila de libros.
Estado inicial de aplicación
Cuando se elimina un libro individual -
aplicación.js
return( <div style={{ position: "relative", minHeight: "100vh" }}> <button style={{ position: "absolute", bottom: "", }} onClick={clearBooks} > Hide Books </button> </div> )2 Respuestas
Responde la pregunta0
¿podrías compartir más de tu código? tal vez tenga un ejemplo de codesandox? Parece ser un problema de estilo, pero es difícil saberlo sin más código.
-editar-
su botón debe estar separado de su lista de libros, esta es la razón por la que esencialmente "sigue" su última tarjeta de libro.
Intenta hacer algo como esto
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> )su CSS para el contenedor div podría ser algo como esto
.wrapper{ display: flex; flex-direction: column }de esta manera tendrás los libros primero y luego el botón se mostrará debajo de la lista
0
Coloque el botón como el hermano más cercano a la section de Libros. Se muestra a continuación. Todo lo que hice fue sacar el botón de la sección. Tendrá que diseñar el botón con relleno y demás para el diseño actualizado.
// 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> )} </> );