Draftjs v0.10版本包括了一个用于管理DraftEntity数据的API变更;全局“DraftEntity”模块被弃用,DraftEntity实例将作为ContentState的一部分进行管理。这意味着以前在DraftEntity上访问的方法现在被移动到ContentState记录中。

这个API的改进为v0.11提供了许多好处:

  • DraftEntity Instancestorage将是immutable的。
  • DraftEntity 不会再在全局被访问到。
  • 对实体数据的任何更改都将触发重新渲染。

Quick Overview(快速概述)

这里是一个简单的列表表示新版已经改变了什么,以及如何更新你的应用程序:

Creating an entity(创建实体)

旧的语法

  1. const entityKey = Entity.create(urlType, 'IMMUTABLE', {src: urlValue});

新的语法

  1. const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', {
  2. src: urlValue,
  3. });
  4. const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

Getting an Entity(获取实体)

旧的语法

  1. const entityInstance = Entity.get(entityKey);
  2. // entityKey is a string key associated with that entity when it was created

新的语法

  1. const entityInstance = contentState.getEntity(entityKey);
  2. // entityKey is a string key associated with that entity when it was created

Decorator Strategy arguments change(装饰器策略参数改变)

旧的语法

  1. const compositeDecorator = new CompositeDecorator([
  2. {
  3. strategy: (contentBlock, callback) =>
  4. exampleFindTextRange(contentBlock, callback),
  5. component: ExampleTokenComponent,
  6. },
  7. ]);

新的语法

  1. const compositeDecorator = new CompositeDecorator([
  2. {
  3. strategy: (contentBlock, callback, contentState) => (
  4. contentBlock, callback, contentState
  5. ),
  6. component: ExampleTokenComponent,
  7. },
  8. ]);

注意,ExampleTokenComponent将接受contentState作为一个props传递进来。
为什么现在装饰器(decorator)的策略中想要把contentState传递过去呢?因为如果我们的策略是在contentBlock中找到某些实体,我们可能需要它:

  1. const mutableEntityStrategy = function(contentBlock, callback, contentState) {
  2. contentBlock.findEntityRanges(character => {
  3. const entityKey = character.getEntity();
  4. if (entityKey === null) {
  5. return false;
  6. }
  7. // To look for certain types of entities,
  8. // or entities with a certain mutability,
  9. // you may need to get the entity from contentState.
  10. // In this example we get only mutable entities.
  11. return contentState.getEntity(entityKey).getMutability() === 'MUTABLE';
  12. }, callback);
  13. };

Decorator Strategies that find Entities(查找实体的装饰器策略)

旧的语法

  1. function findLinkEntities(contentBlock, callback) {
  2. contentBlock.findEntityRanges(character => {
  3. const entityKey = character.getEntity();
  4. return entityKey !== null && Entity.get(entityKey).getType() === 'LINK';
  5. }, callback);
  6. }

新的语法

  1. function findLinkEntities(contentBlock, callback, contentState) {
  2. contentBlock.findEntityRanges(character => {
  3. const entityKey = character.getEntity();
  4. return (
  5. entityKey !== null &&
  6. contentState.getEntity(entityKey).getType() === 'LINK'
  7. );
  8. }, callback);
  9. }

More Information(更多信息)

有关更多信息,请参见更新的示例