格式化 JSON 字符串化响应并将其呈现给 React 组件

Question

当您在进行 api 调用后收到 open ai 的响应时。它将返回一个 json 字符串化响应，当您在 React 组件中渲染它时，它的格式不正确。

例如。如果响应包含编号列表、项目符号点或星号列表。他们不会破坏或创建换行符。例如，它也不会检测到新段落。如果有 URL，它是不可点击的，也不会被缩短。响应只是按原样呈现。顺便说一句，我正在 React 聊天容器中渲染响应，并且我试图避免使用危险的内部 html。

有什么想法可以正确格式化 json 响应的其他方法吗？或者有类似的包可以做到这一点吗？

尝试了危险的内部 html 但这是有风险的。

Answer 1

我们不应该在ReactJS中使用“危险的内部html”，查看此链接以获取更多信息：https://stackoverflow.com/a/60051861/21957513

我知道在 ReactJS 中渲染 HTML 的两种方法：

1. 使用react-render-html库（链接：https://www.npmjs.com/package/react-render-html）

示例代码：

import React from 'react';
import renderHTML from 'react-render-html';

const YourComponent = ({ jsonResponse }) => {
  return (
    <div>
      {renderHTML(jsonResponse)}
    </div>
  );
};

export default YourComponent;

2. 使用react-markdown库（链接：https://www.npmjs.com/package/react-markdown#react-markdown）

示例代码：

import React from 'react';
import ReactMarkdown from 'react-markdown';

const YourComponent = ({ jsonResponse }) => {
  return (
    <div>
      <ReactMarkdown children={jsonResponse} />
    </div>
  );
};

export default YourComponent;

现在，我强烈建议选择第二个选项，使用react-markdown，因为react-markdown构建了一个虚拟DOM，所以React只替换了语法树中更改的内容。而且，最重要的是 - 它拥有更多社区支持并被广泛采用。

如果您有任何疑问，请告诉我。