Estoy aprendiendo React y mientras lo hago, intento construir mi proyecto simple. Para crear una especie de librería, que esté formada por estantes y quiero que los libros estén dentro de estos estantes.
Mi Index.js no ha cambiado ~ creado por npx create-react-app
Aplicación.js:
import Bookstore from './components/BookStore'; function App() { return <Bookstore />; } export default App;estante.js
import React from 'react'; import '../css/shelf.css'; function Shelf() { return <div className="shelf-div"></div>; } export default Shelf;Libro.js
import React from 'react'; import '../css/book.css'; function Book() { return <div className="book-div"></div>; } export default Book;Librería.js
import React from 'react'; import Book from './Book'; import Shelf from './Shelf'; function Bookstore() { return ( <div> <Shelf> <Book /> <Book /> <Book /> </Shelf> <Shelf /> </div> ); } export default Bookstore;Ahora mi aplicación solo muestra los estantes, aunque esperaba que mostrara los libros dentro del primer estante, lo que no funcionó. Traté de agregar los libros directamente en el archivo Shelve.js, que funciona pero muestra los mismos libros en cada estante, pero lógicamente quiero que cada estante contenga libros diferentes, así que quiero agregarlos en Bookstore.js. El css actualmente es solo rectángulos para estantes y rectángulos más pequeños para libros.
Gracias por tu ayuda.
Actualice su Shelf.js de la siguiente manera:
import React from 'react'; import '../css/shelf.css'; function Shelf(props) { return <div className="shelf-div">{props.children}</div>; } export default Shelf;Además, echa un vistazo a la documentación oficial:
Algunos componentes no conocen a sus hijos antes de tiempo. Recomendamos que tales componentes usen el accesorio especial para
childrenpara pasar elementos secundarios directamente a su salida.
si desea renderizar los libros, debe acceder a ellos como accesorios. Cambia tu estantería por esta.
function Shelf(props) { return <div className="shelf-div">{props.children}</div>; }