如何在 React 应用程序中将 JSON 转换为 Html

Question

如何在 react 应用中将 JSON 转换为带有 h​​tml 元素的普通 html？

请注意，如果您不知道要注入的 HTML 字符串中的内容，那么 dangerouslySetInnerHTML 可能会很危险

根据反应文档-

dangerouslySetInnerHTML 是 React 在 浏览器 DOM。一般来说，从代码中设置 HTML 是有风险的，因为 很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 设置 HTML，但是你有 输入 dangerouslySetInnerHTML 并使用 __html 传递一个对象 关键，提醒自己这是危险的。

我在下面创建了一个代码沙箱： https://codesandbox.io/s/relaxed-sunset-tlmr2?file=/src/App.js

输出只是呈现为字符串而不是 html 元素。

这是我的代码：

import React from "react";
import "./styles.css";

const blocks = {
  time: 1602725895949,
  blocks: [
    {
      type: "header",
      data: {
        text: "This is a heading",
        level: 2
      }
    },
    {
      type: "paragraph",
      data: {
        text: "This is a paragraph"
      }
    }
  ]
};

export default function App() {
  function convertToHtml({ blocks }) {
    console.log(blocks);
    var convertedHtml = "";
    blocks.map((block) => {
      switch (block.type) {
        case "header":
          convertedHtml += `<h${block.data.level}>${block.data.text}</h${block.data.level}>`;
          break;
        case "paragraph":
          convertedHtml += `<p>${block.data.text}</p>`;
          break;
        default:
          console.log("Unknown block type", block.type);
          break;
      }
    });

    return <React.Fragment>{convertedHtml}</React.Fragment>;
  }

  return (
    <div className="App">
      <h1>JSON to html below</h1>
      {convertToHtml(blocks)}
    </div>
  );
}

Answer 1

当您在 React 中生成 HTML 时，您不想将其视为字符串，而是希望将其视为组件。您可以返回 <p>{block.data.text}</p> 而不是返回文字字符串 '<p>${block.data.text}</p>'，它是有效的 JSX。

我已将您的 switch 语句转换为呈现单个块的函数组件。请注意，null 是不渲染任何内容的组件的标准返回值。对于动态生成 h1、h2 等的情况，我将该字符串保存为大写字母变量，以便 React 将其解释为自定义组件而不是内置元素。

export function Block({ type, data }) {
  switch (type) {
    case "header":
      const Element = "h" + data.level;
      return <Element>{data.text}</Element>;
    case "paragraph":
      return <p>{data.text}</p>;
    default:
      console.log("Unknown block type", type);
      return null;
  }
}

然后您可以循环遍历块数组并将每个块作为道具传递给Block 组件。每当你从循环中返回元素时，如果你没有设置key，react 会抛出一个警告，所以我使用数组索引作为键。

export default function App() {
  return (
    <div className="App">
      <h1>JSON to html below</h1>
      {blocks.blocks.map((block, i) => (
        <Block key={i} {...block} />
      ))}
    </div>
  );
}

Code Sandbox Link

Answer 2

我有另一个答案。

试试这个。现在没有危险的 HTML 内容了。

import parse from "html-react-parser";

return <React.Fragment>{parse(convertedHtml)}</React.Fragment>;

包裹：https://codesandbox.io/examples/package/html-react-parser

同一个Code Sandbox

https://codesandbox.io/s/modern-glitter-1nnkc?file=/src/App.js:27-65

Answer 3

您必须使用属性dangerouslySetInnerHTML。

像这样：

return <React.Fragment>{<div dangerouslySetInnerHTML={{ __html: convertedHtml }} />}</React.Fragment>;

我还为您的Code Sandbox 提供了解决方案： https://codesandbox.io/s/modern-glitter-1nnkc?file=/src/App.js:1542-1674

如果有效则标记为答案。 谢谢