React 在組件中渲染 DOM HTML 頁面

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]作為結果的原因。

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

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

所以改變，

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

到：

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