使用 react 和 JSX 从 API 渲染富文本的技术答案

【问题标题】：Technique for rendering rich-text from API with react & JSX使用 react 和 JSX 从 API 渲染富文本的技术
【发布时间】：2018-03-10 13:30:01
【问题描述】：

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

编辑器有以下选项：

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

标记的用户将被删除并替换为占位符{{userX}}。剥离的数据单独存储在值 JSON 模式中。

保存为 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 设计可能是错误的，但我缺乏更好的想法来解决这个问题。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：