Aquí estaban los accesorios que originalmente traté de pasar a un componente:
const allprops = { mainprops:{mainprops}, // object pageid:{pageId}, // variable setpageid:{setPageId}, // state function makerefresh:{makeRefresh} // state function } <Navbar allprops={allprops} />
Rápidamente me di cuenta de que creé un monstruo, un objeto anidado:
{mainprops: {…}, pageid: {…}, setpageid: {…}, makerefresh: {…}} mainprops: {mainprops: {…}}Después de romperme la cabeza, se me ocurrió esto:
const Navbar = (props) => { const {allprops} = props; const {mainprops, ...userprops} = allprops const {mainprops:{} = {}} = mainprops; const {userprops:{} = {}} = userprops;¿Hay alguna manera de convertir esto en una sola línea? ¿O un bucle o algo más rápido/más corto?
Está anidando innecesariamente sus valores prop dentro de un objeto adicional. Este:
const allprops = { mainprops:{mainprops}, // object pageid:{pageId}, // variable setpageid:{setPageId}, // state function makerefresh:{makeRefresh} // state function }se puede hacer mucho más conciso y fácil de trabajar cambiándolo a:
const allprops = { mainprops, pageId, setPageId, makeRefresh };y al difundir eso:
<Navbar {...allprops} />Y luego, en su componente hijo, todo lo que necesita es:
const Navbar = ({ mainprops, pageId, setPageId, makeRefresh }) => { // proceed to use mainprops, pageId, setPageId, makeRefresh