Question

在我的React应用程序中，我正在使用标准组件。但是，当用户单击“保存并退出”选项时，应将其重定向到页面，该页面是来自外部位置的dom元素： document.getElementById('thank-you')

我创建了一个应显示此页面的组件： RedirectComponent

const Redirect = () => {
  return (
      <div
        dangerouslySetInnerHTML={{
          __html: window.document.getElementById('save-landing-page'),
        }}
      />
  );
};

我认为将其设置为显示内部HTML（如下面的代码所示）将导致显示元素，这是我得到的第一个错误，建议我使用数组（数据不是）

但是，在应呈现组件的位置，我只能看到以下文本：

[object HTMLElement]

如何在我的React组件中显示此外部页面？

Answer 1

在这一行代码中，

<div
  dangerouslySetInnerHTML={{
   __html: window.document.getElementById('save-landing-page'),
 }}
/>

->您正在将HTMLElement分配为无效的HTML值。

->这就是为什么您将[object HTMLElement]作为结果的原因。

->相反，您需要分配从HTML获得的window.document.getElementById('save-landing-page')。

->您需要为其分配元素的innerHTML。

所以改变

window.document.getElementById('save-landing-page')

收件人：

window.document.getElementById('save-landing-page').innerHTML

在组件中反应渲染DOM HTML页面

1 个答案: