使用 React 和 JSX 从 API 渲染富文本的技术

Question

我最近在使用富文本编辑器，它向我的 API 发送一个 JSON-对象，其中包括所有文本和格式。

编辑器有以下选项：

然后 API 从这个对象生成一个 HTML-string 并将其存储在数据库中以获得更好的性能，因为大多数条目是评论，它们以 15 个项目的批次加载。

标记的用户从中删除并替换为占位符 {{userX}}。条带化数据单独存储在值 JSON-schema.

中

保存到 HTML 后看起来像这样：

<p>
    Hello {{user1}},
    <strong>how are you doing?</strong>
</p>

像这样的值：

{
    "user1": {
        "text": "@anna",
        "username": "anna"
    }
}

这样做的主要原因是我必须在客户端生成链接以使其可用于 react-router。

所以我的想法是在客户端将其呈现为类似这样的东西：

<p>
    Hello <Link to="/users/anna">@anna</Link>,
    <strong>how are you doing?</strong>
</p>

但是据我所知，我无法在 React 的渲染函数中或使用 dangerouslysetinnerhtml.

渲染这个动态 JSX 代码

所以我认为我的 api-设计可能是错误的，但我缺乏更好的想法来解决这个问题。

Answer 1

已经有一段时间了，但与此同时发布了 htm 包，应该可以解决问题。

使用 htm 实际上可以在运行时（在服务器或浏览器中）解析 JSX-string 并将其连接到 React-api（如 React itself, or Preact 等）

Technique for rendering rich-text from API with react & JSX