文章/答案/技术大牛

发布

社区首页 >问答首页 >NextJS:从另一个组件重新加载iFrame

问NextJS:从另一个组件重新加载iFrame
EN

Stack Overflow用户

提问于 2022-02-08 12:33:23

回答 1查看 4.3K关注 0票数 1

我有一个NextJS应用程序，其页面如下：

页面：

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

这个页面有一个iframe，一个父Layout组件，还有一个名为Sidebar的组件。

父布局：

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

侧边栏：

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

布局和边栏都有一个按钮。我希望能够在任何按钮的按键上重新加载iframe。如何在react/nextjs项目中实现这一点？首先，我在寻找在reactjs中重新加载iFrame的最佳方法。

javascript

reactjs

next.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-02-08 12:57:28

将key={keyValue}添加到iframe中对您的应用程序有用吗？然后，只要按下按钮，就可以设置该键的值。这应该会导致重呈现。

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

在你的组件里

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71033988

复制

相似问题

问NextJS:从另一个组件重新加载iFrame
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NextJS:从另一个组件重新加载iFrameEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NextJS:从另一个组件重新加载iFrame
EN