如何解决在 contentEditable 中插入复杂的 React 组件？
我的目标是在“contentEditable”div 中插入复杂的反应组件（API 调用以丰富内容、操作按钮等）。这些组件必须像项目符号一样插入文本中的任何位置。当您输入一个电子邮件地址时，它的工作方式有点像 gmail，一旦它被验证就变成一个对象，但在我的情况下，这个对象将包含多个字段。
因此，我找到的最佳解决方案是使用包含文本或组件的列表提供 contentEditable。例如：
<div contentEditable=true>
<span> Some text... blah blah blah </span>
<ComplexComponent />
<span> Some more text</span>
<ComplexComponent />
</div>
所以渲染真的很有趣，组件很好地插入在文本中间，文本/组件列表根据用户的操作进行调整。
除此文本/组件列表外，还有其他架构吗？
我相信您可以想象管理所有用户事件以控制它们是多么麻烦。
选集： 一旦被 React 渲染，文本中间的组件被认为是可编辑的文本；如果我们不设置算法来保护它们，它们甚至可以以任何方式擦除。 出于同样的原因，如果您在包含 React 组件的选择上按 CtrlX，Chrome 将无法区分自己，结构变得难以维护……除非有特殊规则 您必须保持组件的样式……那么如果用户从文本中选择一个组件并将其加粗怎么办？甚至使它成为项目符号列表？ DOM 节点中断...除非您再次有特殊规则 一个技巧：我使用文本或组件的键来强制在正确的时间重新创建它们（我避免使用经典渲染，以免每次按下键时都重置光标......） ……等等……
=> 如何采用清晰且可维护的代码结构？ 我在处理遇到的问题时创建函数，我将这些函数放在我的 contentEditable 的功能组件中，它开始增长...... 简而言之，所有这些都有些技巧，尤其是使用此文本/组件列表。 然而，react 并不特别提倡具有继承等的经典对象架构......
谁能把我从这个坑里救出来？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。