实体 Entities 究竟是什么?它的可变性Mutability 是什么?三种属性怎么应用呢?
Decorator是否可以重复使用呢?Decorator在源码里到底是如何实现的,为什么可以起到装饰的作用?
有一个现象:当我用同一个decorator去生成两个不同的editorstate时,如果这两个editorstate的第一行都是链接,那么从第一个页面切换到第二个页面时,装饰链接的Link组件不会触发construct,虽然entity里面的src已经是第二个的了,但是却没有同步到state里面,因为没有触发construct以及componentWillMount。
虽然是不同的editorstate,但是用了同一个decorator的引用,说明draft认为第一行的链接之前已经构造好并且挂载过了,所以不会重新挂载。
如何把redux树传到decorator里面呢?这样可以做更多的操作。decorator组件内部自己更改,也可以走统一的update流程即, this.props.editorAction.updateEditorState()
目前链接只有一种修改方式,就是在decorator内部contentState.mergeEntityData,这样我并没有显示地更改editorstate,但是发布时也是可以保存成功的,为什么呢?
以下为draftJs的源码,instances实际上是entityMap本质上时immutable-js里面的map。
它不仅仅返回了newInstance,而且更新了entityMap。
__mergeData: function __mergeData(key, toMerge) {
var instance = DraftEntity.__get(key);
var newData = _extends({}, instance.getData(), toMerge);
var newInstance = instance.set('data', newData);
instances = instances.set(key, newInstance);
return newInstance;
},
那entityMap和contentState的关系是什么呢?
根据源码,ContentState有一个entityMap属性,contentState.getEntityMap()实际上就是返回了上面的 instances。
而editorState和contentState的关系是什么呢?
首先ContentState和editorState都是Immutable里面的Record
而editorState的currentContent属性就是ContentState。
所以是可以保存成功的。虽然看上去不应该这样去修改。
* In a ContentBlock, every position in the text may correspond to zero
* or one entities. This correspondence is tracked using a key string,
* generated via DraftEntity.create() and used to obtain entity metadata
* via DraftEntity.get().
为 什么src/Draft.js文件中可以require其他模块呢?
因为先把src下的js文件,gulp到了lib下面,所以可以直接require到了。
var paths = {
dist : 'dist' ,
lib : 'lib' ,
src : [
'src/**/*.js' ,
'!src/**/__tests__/**/*.js' ,
'!src/**/__mocks__/**/*.js' ,
] ,
css : [
'src/**/*.css' ,
] ,
} ;
gulp . task ( 'modules' , function ( ) {
return gulp
. src ( paths . src )
. pipe ( babel ( babelOptsJS ) )
. pipe ( flatten ( ) )
. pipe ( gulp . dest ( paths . lib ) ) ;
} ) ;