v0.10 API 迁移指南

Draft.js v0.10 版本包含了一个管理 DraftEntity API的改变。现在不再支持全局的 DraftEntity 模块，而是把 DraftEntity 实例迁移到了 ContentState 中。这意味着 DraftEntity 提供的方法也被迁移到了ContentState 中。
+
这个 api 的改进有很多好处，这些好处将在 v0.11 版本中获得：

• DraftEntiy 实例也是不可变的对象；
• DraftEntity 不会被全局访问到；
• 所有 entity 的改变会触发重新渲染。

快速预览

下面列举了有哪些改变，和怎么升级你的应用。

新建一个 Entity

旧的语法

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

新的语法

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

获取一个 Entity

旧的语法

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

新的语法

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

Decorator 中 strategy 函数的参数改变

旧的语法

const compositeDecorator = new CompositeDecorator([
  {
    strategy: (contentBlock, callback) =>
      exampleFindTextRange(contentBlock, callback),
    component: ExampleTokenComponent,
  },
]);

新的语法

const compositeDecorator = new CompositeDecorator([
  {
    strategy: (contentBlock, callback, contentState) => (
      contentBlock, callback, contentState
    ),
    component: ExampleTokenComponent,
  },
]);

注意 ExampleTokenComponent 会传入 contentState 作为prop。 为什么这样做呢？我们在 contentBlock 中查找指定的 entity 时需要 contentState，因为 entity 的 api 已经迁移到了 contentState 中：

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

Decorator 中查找 Entities 的 Strategies

旧的语法

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

新的语法

function findLinkEntities(contentBlock, callback, contentState) {
  contentBlock.findEntityRanges(character => {
    const entityKey = character.getEntity();
    return (
      entityKey !== null &&
      contentState.getEntity(entityKey).getType() === 'LINK'
    );
  }, callback);
}

更多信息

更多信息可以查看 升级示例。