How to inline a HTML file without using Webpack in React?-CodePudding

I want to simply inline a HTML file in React by doing something like this :

import someFile from './aHtmlFile.html';

const Example = (props) => {
    return (
        <div dangerouslySetInnerHTML={ {__html: someFile} } />
    );
}

However, I don't want to install Webpack only because of this. Are there any other ways of doing this easily ?

CodePudding user response：

You can load the file via fetch and save it into a state.

import { useState } from "react";
import { useEffect } from "react";

export const Example = (props) => {
  const [content, setContent] = useState("");

  useEffect(() => {
    fetch("./aHtmlFile.html").then((response) => {
      setContent(response.data);
    });
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: content }} />;
};