react公用文件夹html路径

Question

我想知道是否有可能以某种方式自定义 React，以便它读取文件夹内的 HTML 文件并为它们提供路由，例如 quiz/age.html、quiz.sex.html。

公共/ 报价/index.html 测验/ 年龄.html 性别.html
索引.html 图标.ico

如果没有，也许有人知道除了 iframe 之外将 html 插入到我的 React 应用程序中的好方法是什么，这样它就有我需要的路由。

我尝试了 iframe 的选项，但我真的不想在我的应用程序中使用这种方法。

Answer 1

您可以下载

quiz/*.html

的 HTML 内容并使用

dangerouslySetInnerHTML

将其设置在 div 内（确保它 100% 安全，并且没有 XSS 攻击的机会 - 这就是该参数被称为

dangerouslySet...

的原因）

所以它看起来像这样：

const [htmlContent, setHtmlContent] = useState('');

useEffect(() => {
  fetch(`/quiz/age.html`)
    .then((response) => response.text())
    .then((html) => setHtmlContent(html));
}, []);

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