将 Draft.js 与试剂一起使用

Question

有没有人有幸为 Reagent 改编 Draft.js？如果立即通过 reagent/adapt-react-class 导入 Draft.js，则会出现相当大的编辑问题。光标跳跃，打字时符号消失，onChange 调用不正确 EditorState，随你便。

人们在 clojurians/reagent Slack 频道中报告了类似的问题，但目前似乎还没有解决方案。

如有任何帮助，我们将不胜感激。

Answer 1

只是一个想法（更多评论，但我还不能提供评论），因为——如果我没记错的话——:content-editable 属性在 Reagent 中以特殊方式处理：

既然问题好像是在Reagent调用Draftjs编辑器的时候出现的，那把Reagent-component转成React-component(使用reagent/reactify-component)，再用这个"reactified" 组件作为 Reagent 中的反应组件，使用 reagent/create-element？我会假设 Reagent 然后不会干预 Draftjs 编辑器。

Answer 2

好的，感谢tonsky，我得到了答案。 Reagent/Rum 正在对 requestAnimationFrame 使用延迟渲染，但是 Draft.Editor 应该在设置 editorState 时立即重新渲染。

我们只需要在编辑器 onChange 被调用时为编辑器父组件调用 forceUpdate:

:editorState @editor-state-atom
:onChange    (fn [new-state]
               (reset! editor-state-atom new-state)
               (.forceUpdate @wrapper-state))

代码示例适用于 Reagent，适用于 Rum 的解决方案相同

将 Draft.js 与试剂一起使用

Using Draft.js with Reagent

clojurescript

reagent

draftjs