时间戳

首页 > 解决方案 > 如何在 React 应用程序中将 JSON 转换为 Html

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

问题描述

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

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

根据反应文档 -

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 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>
  );
}

标签： reactjs

解决方案

当您在 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组件。每当您从循环中返回元素时，如果您没有设置 a ，react 就会引发警告key，因此我使用数组索引作为键。

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

代码沙盒链接

推荐阅读