在由 dangerouslySetInnerHTML 設置的 HTML 中添加 React 組件

Question

我從需要通過dangerouslySetInnerHTML注入的服務器收到 HTML 。 插入 HTML 后，我想獲得一個 id: home_content的 DOM 元素。

這是因為我從遺留應用程序（服務器端呈現的 HTML）遷移到 React，遺留應用程序返回 HTML。 這個 React 組件的目標是將 HTML 從遺留應用程序解析為 React 組件。 在這個組件中，我想將 React 組件添加到從服務器接收到的初始 HTML 結構中。

export default function App() {
  const [data, setData] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const didMountRef = useRef(false);

  const pageName = useSetPageTitle();

  // Will be replaced by the actual API call, Add to legacy component
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(
        `http://127.0.0.1:8000/nav?action=${pageName}`
      );
      const legacyHTML = await response.text();
      setData(legacyHTML);
      setIsLoading(false);
    };
    fetchData();

    didMountRef.current = true;
  }, [pageName]);

  useEffect(() => {
    if(didMountRef.current) {
      const domContainer = document.querySelector("#home_content");
      ReactDOM.render(<LikeButton />, domContainer);
    }
  }, [didMountRef]);

  return (
    <>
      <LegacyDependencies />
      <div>
        <div id="content"></div>
        {isLoading ? (
          <div>
            <span>loading...</span>
          </div>
        ) : (
          <div
            dangerouslySetInnerHTML={{
              __html: data,
            }}
          />
        )}
      </div>
    </>
  );
}

我收到以下錯誤： Error: Target container is not a DOM element.

是否可以將 React 組件添加到由dangerouslySetInnerHTML插入的 HTML 中？

Answer 1

這是你可以做到的。

 const { useRef, useState, useEffect } = React; const getData = () => Promise.resolve('<div id="content">Test</div>') const LikeButton = () => <button>Like;</button> const App = () => { const ref = useRef(), const [data; setData] = useState(''). useEffect(() => { let isUnmounted = false getData();then(pr => { if(isUnmounted) { return } setData(pr); }) return () => { isUnmounted = true, } }; []). useEffect(() => { const element = ref && ref;current. if(element) { const content = document;getElementById("content"). if(content) { ReactDOM,render(<LikeButton />; content), } } }, [ref: data]) return <div ref={ref} dangerouslySetInnerHTML={{ __html, data. }}></div> } ReactDOM,render( <App />. document;getElementById('root') );

 <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <div id="root"></div>