用于通过反应和API从API渲染富文本的技术JSX

Question

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

编辑器有以下选项：

• 基本文字格式（例如粗体，斜体）
• 使用@username
标记用户

然后，API会从此对象生成一个HTML字符串，并将其存储在数据库中以获得更好的性能，因为大多数条目都是以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>

但是afaik我无法在react的渲染函数或dangerouslysetinnerhtml中渲染这个动态JSX代码。

所以我认为我的api-design可能是错的，但我缺乏更好的想法如何解决这个问题。

Answer 1

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

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