最佳实践：在用户输入中启用 React 组件答案

【问题标题】：Best Practice: Enable React Component in User Input最佳实践：在用户输入中启用 React 组件
【发布时间】：2021-08-02 02:31:13
【问题描述】：

我想允许使用 rails/react/material-ui/mobx 编写的博客之类的应用程序的用户在他们的文章中添加自定义组件，例如投票。所以我想在文章编辑器中添加某种按钮，添加一个投票，然后在发布时使用自定义反应组件呈现。做这种事情的最佳做法是什么？我应该吗？

让用户输入包含该组件的 JSX 代码，例如，数据库中保存的文本将如下所示
```
some text....
<MyPoll ...>
  <MyChoice> Foo </MyChoice> 
</MyPoll>
more text...
```
但是我需要有一些函数来解释这段代码，只允许指定的组件（就像一个带有净化功能的动态 jsx 转译器......这是否存在？）。
有一个民意调查模型并在编辑器中创建民意调查对象，然后插入一个具有特殊类（如“react-standin”）的 div，然后有一个我查阅的表，该表将唯一的 div id 映射到数据库中的民意调查对象。所以保存的文本看起来像：
```
 some text....
 <div class="react-standin" id=myguid></div> 
 more text...
```
然后当需要显示时，我会将 id 映射到需要显示的任何已保存组件（缺点是我现在需要为每个组件实现后端支持并拥有所有权信息，因此用户无法猜测其他组件用户组件）。
某种混合体。例如，使用输入中 dom 元素的属性创建某种 DSL，例如，保存的文本如下所示：
```
some text....
<div class="poll-component" ...>
  <div class="poll-answer"> Foo </div> 
</div>
more text...
```
这感觉是对的，特别是如果有一个库可以实现这种 HTML 元素属性的翻译以响应组件。
还有什么？也许将一篇文章表示为一组可能的组件，其中一个是原始文本/html/markdown。所以它会作为一组 guid 保存在服务器上，引用不同类型的数据库组件（这似乎是错误的）

我觉得这一定是一个已解决的问题，我很想看看其他人是如何处理这个问题的，但我搜索时找不到。

【问题讨论】：

标签： javascript reactjs user-interface user-input input-sanitization

【解决方案1】：

好的，经过一段时间的努力，我最终搜索了基于反应的富文本编辑器。这里的两个主要编辑器框架是slate.js 和draft.js。现在，这两个编辑器框架所做的就是将您的输入存储为一个树（例如，文本的 DOM 之类的 JSON 版本），它捕获应用于下面元素的任何样式。

这些框架还允许您定义自己的样式，并且您可以使用您的反应投票组件在文本编辑器中简单地设置投票元素的样式。然后，您可以使用只读版本的文本编辑器简单地显示结果（或直接使用 react 组件将其解析出来）。

但是，如果您想将用户内容存储为 HTML 或其他标准标记，而不是链接到您选择的特定编辑器配置的 JSON 格式，那么我仍然不知道。

【讨论】：