最佳实践：在用户输入中启用 React 组件
Best Practice: Enable React Component in User Input
我想允许用 rails/react/material-ui/mobx 编写的类似博客的应用程序的用户向他们的文章添加自定义组件，例如民意调查。所以我想在文章编辑器中添加某种按钮，它会添加一个投票，然后在发布时使用自定义 React 组件呈现该投票。做这种事情的最佳做法是什么？我应该吗？
让用户输入包含该组件的 JSX 代码，例如，数据库中保存的文本看起来像
some text....
<MyPoll ...>
<MyChoice> Foo </MyChoice>
</MyPoll>
more text...
但是我需要一些函数来解释这个代码，只允许指定的组件（就像一个带有清理功能的动态 jsx 转译器......这是否存在？）。
有一个投票模型，在编辑器中创建投票对象，然后插入一个 div 和一个特殊的 class，比如“react-standin”，然后有一个table 我咨询了哪个将唯一 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 元素属性的翻译以响应组件。
还有别的吗？也许将一篇文章表示为一组可能的组件，其中一个是原始组件 text/html/markdown。所以它会作为一组引用不同类型的数据库组件的 guids 保存在服务器上（这似乎是错误的）
我觉得这一定是一个已解决的问题，我很想看看其他人是如何处理这个问题的，但我搜索时找不到。
好吧，在我苦思冥想一段时间后，我最终搜索了基于 React 的富文本编辑器。这里的两大编辑器框架是slate.js and draft.js。现在这两个编辑器框架所做的是将您的输入存储为一棵树（例如 JSON 版本的 DOM 之类的文本），它捕获应用于以下元素的任何样式。
这些框架还允许您定义自己的样式，并且您可以使用 React 轮询组件在文本编辑器中简单地设置轮询元素的样式。然后，您可以使用文本编辑器的只读版本简单地显示结果（或使用反应组件直接解析出来）。
但是，如果您想将用户内容存储为 HTML 或其他标准标记，而不是像链接到您选择的特定编辑器配置的 JSON 格式，那么我仍然不会不知道。
我想允许用 rails/react/material-ui/mobx 编写的类似博客的应用程序的用户向他们的文章添加自定义组件，例如民意调查。所以我想在文章编辑器中添加某种按钮，它会添加一个投票，然后在发布时使用自定义 React 组件呈现该投票。做这种事情的最佳做法是什么？我应该吗？
让用户输入包含该组件的 JSX 代码，例如，数据库中保存的文本看起来像
some text.... <MyPoll ...> <MyChoice> Foo </MyChoice> </MyPoll> more text...但是我需要一些函数来解释这个代码，只允许指定的组件（就像一个带有清理功能的动态 jsx 转译器......这是否存在？）。
有一个投票模型，在编辑器中创建投票对象，然后插入一个 div 和一个特殊的 class，比如“react-standin”，然后有一个table 我咨询了哪个将唯一 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 元素属性的翻译以响应组件。
还有别的吗？也许将一篇文章表示为一组可能的组件，其中一个是原始组件 text/html/markdown。所以它会作为一组引用不同类型的数据库组件的 guids 保存在服务器上（这似乎是错误的）
我觉得这一定是一个已解决的问题，我很想看看其他人是如何处理这个问题的，但我搜索时找不到。
好吧，在我苦思冥想一段时间后，我最终搜索了基于 React 的富文本编辑器。这里的两大编辑器框架是slate.js and draft.js。现在这两个编辑器框架所做的是将您的输入存储为一棵树（例如 JSON 版本的 DOM 之类的文本），它捕获应用于以下元素的任何样式。
这些框架还允许您定义自己的样式，并且您可以使用 React 轮询组件在文本编辑器中简单地设置轮询元素的样式。然后，您可以使用文本编辑器的只读版本简单地显示结果（或使用反应组件直接解析出来）。
但是，如果您想将用户内容存储为 HTML 或其他标准标记，而不是像链接到您选择的特定编辑器配置的 JSON 格式，那么我仍然不会不知道。