如何渲染存储在对象中的 HTML？

Question

我正在使用 nextjs。我需要根据其特定的 url 呈现自定义登录页面。除了包含页面详细信息的对象之外，我能够从该特定 URL 的数据库中呈现所有详细信息。这些页面是在grapesjs 的帮助下构建的。 以下是db中的数据：

以下是呈现页面列表的代码： index.js

import Link from "next/link"
export const getStaticProps = async () => {
  const res = await fetch("http://localhost:5000/api/webpage/");
  const data = await res.json();
  return {
    props: {
      data,
    }
  };
};

const blog = ({ data }) => {
  return (
    <div>
      {data?.map((currentElement) => {
        return (
          <div key={currentElement.id} className="ssr-styles">
            <h3>
              {/* {currentElement._id} */}
              <Link href={`/blog/${currentElement.url}`}>
                {currentElement.name}
              </Link>
            </h3>
          </div> 
        );
      })}
    </div>
  );
};
export default blog;

以下是页面实际呈现的代码： [pageno].js=>

export const getStaticPaths = async () => {
  const res = await fetch("http://localhost:5000/api/webpage/");
  const data = await res.json();
  const paths = data.map((currentElement) => {
    return {
      params: { pageno: currentElement.url.toString() }
    };
  });
  return {
    paths,
    fallback: false
  };
};
export const getStaticProps = async (context) => {
  const url = context.params.pageno;
  const res = await fetch(`http://localhost:5000/api/webpage/url/${url}`);
  const data = await res.json();
  return {
    props: {
      data
    }
  };
};

export const Details = ({ data }) => {
  return (
    <>
      <div key={data.url} className="ssr-styles">
        {data._id}
        <h3>{data.name}</h3>
      </div>
    </>
  );
};

export default Details;

如何在对象内容中渲染 html 以获得正确的网页？

Answer 1

您可以尝试使用html-react-parser 库。它将 HTML 字符串转换为 React 元素。