v0.10 API 迁移

The Draft.js v0.10 release includes a change to the API for managing DraftEntitydata; the global 'DraftEntity' module is being deprecated and DraftEntityinstances will be managed as part of ContentState. This means that the methods which were previously accessed on DraftEntityare now moved to the ContentStaterecord.

Draft.js的v0.10发布版本包括了一个管理DraftEntity数据的API的变更；全局的“DraftEntity”模块被弃用，DraftEntity实例将作为ContentState的部分被管理。这意味着，以前访问DraftEntity的方法现在被迁移到了ContentState记录中。

This API improvement unlocks the path for many benefits that will be available in v0.11:

这个API的改进将促使v0.11版本提供更多好处：

• DraftEntity instances and storage will be immutable.
• DraftEntity will no longer be globally accessible.
• Any changes to entity data will trigger a re-render.

• DraftEntity实例和存储是持久的。
• DraftEntity将不再是全局可访问的。
• 对实体数据的任何更改将触发重新渲染。

快速概览

Here is a quick list of what has been changed and how to update your application:

这里是一个快速阅览列表，关于什么东西被更改了，以及如何更新你的程序。

创建一个实体

旧语法

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

新语法

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

获取一个实体

旧语法

const entityInstance = Entity.get(entityKey);
// entityKey is a string key associated with that entity when it was created
// entityKey 是一个在实体创建时关联到它的字符串 key

新语法

const entityInstance = contentState.getEntity(entityKey);
// entityKey is a string key associated with that entity when it was created
// entityKey 是一个在实体创建时关联到它的字符串 key

装饰器策略参数变化

旧语法

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

新语法

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

Note that ExampleTokenComponent will receive contentState as a prop.

注意ExampleTokenComponent 会接受contentState作为一个prop。

Why does the 'contentState' get passed into the decorator strategy now? Because we may need it if our strategy is to find certain entities in the contentBlock:

为什么“contentState”现在需要获准进入装饰器策略？因为假如我们的策略在contentBlock中找到确定的Entity，我们需要它。

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.
      // 寻找某种类型的实体，或者具有确定的可变性的实体
      // 你也许需要从 contentState 中获取实体，这个例子中我们只获取了可变的实体
      return contentState.getEntity(entityKey).getMutability() === 'MUTABLE';
    },
    callback,
  );
};

寻找实体的装饰器策略

旧语法

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,
  );
};

更多信息

For more information see the updated examples.

观看更新实例以获取更多信息。