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

ie3xauqp 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(151)

我想在我的后端托管一些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.

我怀疑这个问题与Promise有关，也就是说，在我当前编写的代码中，Content组件试图返回一个包含Promise而不是解析值的片段。
如果是这种情况，如何将Content的内部HTML设置为从获取返回的HTML？

JavaScript

来源：https://stackoverflow.com/questions/74956787/how-can-i-inject-html-fetched-from-the-back-end-into-a-react-component

2条答案

按热度按时间

nue99wik1#

您可以在元素上使用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 }} />;
}

赞(0）回复(0）举报 2023-01-01

ijnw1ujt2#

根据@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>
    </>
  )
}

它工作，但它似乎有点像一个杂牌。如果你碰巧知道一个解决方案，更习惯，请随时张贴一个更好的解决方案。

赞(0）回复(0）举报 2023-01-01

我来回答

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

2条答案

相关问题

热门标签

最新问答