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

Question

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

编辑器有以下选项:

• 基本文本格式(例如粗体、斜体)
• 使用 @username 标记用户

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

标记的用户将被删除并替换为占位符{{userX}}。 strip 化数据单独存储在值 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 设计可能是错误的，但我缺乏更好的想法来解决这个问题。

Answer 1

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

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