banner

使用动态引入组件功能解决富文本编辑器加载问题

分类: 前端 |发布时间: 11/29/2018, |修改时间: 11/29/2018, |共有 0 条评论 点此返回

在Nekohand Blog的后台开发中, 遇到了一个关于后端渲染(SSR)丢失document对象的问题。 碰巧这时还涉及到了React组件, Antd的表格和富文本编辑器。 在这里记录一下。

问题描述

在编辑器功能时选择了基于draftjs的富文本组件Braft Editor, 常规引入时出现错误window is not defined。 具体代码为ArticleEdit.js的第11行,可以看到BraftEditor使用了常规的引入方式。

原因分析

因为对SSR的机能不是很了解。请教了作者。作者指出服务端渲染时,在node.js里是没有window对象的,建议将富编辑器部分的代码使用异步加载,关闭这部分的服务端渲染,这样还可以加快这个页面的加载。

解决方案

抽出子组件

按照文档指南的动态引入章节, 抽象出了一个BraftEditor组件, 见BraftEditorElement.js。需要注意的是draftjs的数据流是基于ImmutableJS的,处理数据时需要调用组件对象。 上一版本中在调数据时污染了model.js, 这里删除了散落在model中的Editor对象。

在父组件中异步加载

在父组件中异步加载了子组件。这时子组件的数据并没有同步进入Antd的Form中。 这里上一版本在获取数据时需要先调用Form的方法, 并使用BraftEditor对象的createEditorState方法格式化数据。现在由于子组件是异步加载,子组件的数据在只能在子组件内部格式化(父组件在获取数据时并没有BraftEditor对象, 无法格式化数据)。 解决方法是请求了服务端两次, 父组件和子组件各一次。 子组件调用父组件Form中的方法将子组件自己的数据写入父组件中(涉及到React中子组件调用父组件的方法)

    // 子组件监听修改
handleChange = (editorState) => {
console.log(typeof editorState.toHTML, 'editor state')
let convertToHTML = editorState.toHTML;
if (typeof convertToHTML === 'function') {
this.setState({
editorState,
outputHTML: editorState.toHTML(),
});
// 这里调用了父组件的方法
this.props.setValue(this.state.editorState.toHTML());
}
};
// 父组件的方法
onSetValue = (body) => {
// 这里就是form的setFieldsValue方法写入数据
this.props.form.setFieldsValue({
body
});
};
// 父组件引用子组件加属性

文本框的主动和被动

只允许主动改变或者被动改变其中之一(也就是要么有defaultValue这样被动的接受变化, 或者有value进行数据绑定)

0 条评论

评论排序
banner

Tokei

Entertainment & Technical Blog

Bilibili |  Github