[英]React render DOM HTML page in component
In my React app, I am using the standard component.在我的 React 应用程序中,我使用的是标准组件。 However, when the user clicks a save & exit option they should be redirected to a page which is a dom element from an outside location:
document.getElementById('thank-you')
但是,当用户单击保存和退出选项时,他们应该被重定向到一个页面,该页面是来自外部位置的 dom 元素:
document.getElementById('thank-you')
I've created a component which should display this page: RedirectComponent我创建了一个应该显示此页面的组件: RedirectComponent
const Redirect = () => {
return (
<div
dangerouslySetInnerHTML={{
__html: window.document.getElementById('save-landing-page'),
}}
/>
);
};
I thought that setting this to display inner HTML as shown in the code below would result in the display of my element as the first error I got suggested I use an array (which the data is not)我认为将其设置为显示内部 HTML,如下面的代码所示会导致我的元素显示为第一个错误,我建议我使用数组(数据不是)
However,where the component should be rendered, I only see the following text:但是,在应该呈现组件的地方,我只看到以下文本:
[object HTMLElement]
How can I display this external page in my React Component?如何在我的 React 组件中显示这个外部页面?
In this line of code,在这行代码中,
<div
dangerouslySetInnerHTML={{
__html: window.document.getElementById('save-landing-page'),
}}
/>
-> You are assigning the HTMLElement
as the HTML value which won't work. -> 您将
HTMLElement
分配为不起作用的 HTML 值。
-> And that is the reason you are hetting [object HTMLElement]
as result. -> 这就是你将
[object HTMLElement]
作为结果的原因。
-> Instead you need to assign the HTML
that you get from window.document.getElementById('save-landing-page')
. -> 相反,您需要分配从
window.document.getElementById('save-landing-page')
获得的HTML
。
-> For which you need to assign innerHTML
of the element. -> 您需要为其分配元素的
innerHTML
。
So change,所以改变,
window.document.getElementById('save-landing-page')
to:到:
window.document.getElementById('save-landing-page').innerHTML
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.