Tengo una aplicación NextJS, con la siguiente página:
Página:
import Layout from "@/components/app/Layout"; import Sidebar from "@/components/app/Sidebar"; export default function SiteIndex() { return ( <Layout> <div className="flex"> <Sidebar /> <div className="m-5"> <iframe src="/page.htm"></iframe> </div> </div> </Layout> ); } Esta página tiene un iframe, un componente principal de Layout y un componente más llamado Sidebar .
Diseño principal:
export default function Layout({ children }) { return ( <div> <div class="h-12 bg-gray-200 flex"> <div className="m-2 grow">Parent Layout</div> <button className="bg-blue-500 text-white p-3">Reload iFrame Button</button> </div> <div>{children}</div> </div> ) }Barra lateral:
export default function Sidebar() { return ( <div className="w-64 border border-r-100 m-5"> <div>Sidebar</div> <button className="bg-blue-500 text-white p-3">Reload iFrame Button</button> </div> ) }Tanto Layout como Sidebar tienen un botón. Quiero poder recargar el iframe al presionar cualquiera de esos botones. ¿Cómo puedo lograr esto en el proyecto react/nextjs? principalmente estoy buscando la mejor manera de recargar un iFrame dentro de reactjs.
¿Funcionaría para su aplicación agregar una key={keyValue} al iframe ? Luego puede establecer el valor de esa tecla cada vez que se presiona el botón. Esto debería causar una nueva renderización.
export default function SiteIndex() { const [keyValue, setKeyValue] = useState(0); return ( <Layout onButtonClick={() => setKeyValue(keyValue + 1)} > <div className="flex"> <Sidebar onButtonClick={() => setKeyValue(keyValue + 1)} /> <div className="m-5"> <iframe src="/page.htm" key={keyValue}></iframe> </div> </div> </Layout> ); }Y en tu componente