如何将从后端获取的HTML注入到react组件中?

Question

我想在我的后端托管一些HTML，然后我可以插入到react组件中。

我尝试过使用dangerouslySetInnerHTML的解决方案，但同样不成功。

基本的想法是，我想有一个组件，Content，获取一些HTML，然后返回一个片段，其中的HTML:

export async function Content({ resourcePath }) {
const response = await fetch(resourcePath, { method: 'GET' })
const html = await response.text();
return (
<>
{html}
</>
)
}

在后端，我在Express服务器上设置了侦听resourcePath上的GET请求的路由:

import express from 'express';
import fs from 'fs';
export const contentRouter = express.Router();
contentRouter.get('/content/homepage', (_, res) => {
const data = fs.readFileSync("path/to/page.html");
res.send(data.toString());
})

当我加载一个包含Content组件的页面时，我能够从响应中记录原始HTML，但是控制台禁止大量错误。

我认为最相关的错误是

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我怀疑这个问题与承诺有关，即由于我的代码目前编写的Content组件试图返回一个包含承诺而不是解析值的片段。

如果是这种情况，我如何将Content的内部HTML设置为从fetch返回的HTML ?

Answer 1

你可以在元素上使用dangerouslySetInnerHTML道具，更多信息请参阅文档https://reactjs.org/docs/dom-elements.html dangerouslysetinnerhtml

export function Content({ resourcePath }) {
const [html, setHtml] = useState(null);
useEffect(() => {
fetch(resourcePath, { method: "GET" }).then((response) => {
response.text().then((resultsHTML) => {
setHtml(resultsHTML);
});
});
}, []);
return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Answer 2

根据@jonrsharpe的建议，我将Content函数设置为同步:

export function Content({ resourcePath }) {
fetch(resourcePath, { method: 'GET' })
.then(response => response.text())
.then(html => {
const content = document.querySelector('#content_container');
content.innerHTML = html;
})
.catch(err => console.log(err));
return (
<>
<span id="content_container"></span>
</>
)
}

它可以工作，但看起来有点拼凑。如果你碰巧知道一个更习惯的解决方案，请随时发布一个更好的解决方案。