Внимание: Редактор Medium вызывает затруднения, поэтому я создал страницу с правильно отформатированным содержанием этого руководства: https://lakesare.github.io/draft-rendering-methods.

Что такое контентный блок? Кодовый ключ

В черновике блок содержимого - это объект javascript внутри состояния <Editor/> (который мы сохраняем в нашем компоненте и передаем как Editor.props.editorState). Мы можем посмотреть, что contentBlock имеет наш <Editor/>, зарегистрировав convertToRaw(this.state.editorState.getCurrentContent()) в консоли.

Если мы засеем наш редактор с <h6>Hii</h6>, он вернет, среди прочего, что-то вроде этого:

blocks: [
  { // content block
    text: "Hii"
    type: "header-six"
  }, {}, {}
]

Итак, "header-six" type соответствует <h6> html tag. Чтобы определить, какой блок содержимого type относится к html tag, см. Https://github.com/facebook/draft-js/blob/16ed6e5a1e7c9d5a0d5718b9a50c8256ee33f938/src/model/immutable/DefaultDraftBlockRender ( ну или проверьте это с помощью этого кода).

Еще раз: блок содержимого - это объект в состоянии редактора. Когда <Editor/> отображает свое состояние в некоторый реальный HTML-код, который мы видим, он будет смотреть на type блока содержимого, сопоставлять его с некоторым тегом (header-six => <h6>) и показывать его.

Что вообще означает индивидуальный рендеринг блока? Кодовый ключ

Посмотрите на наш код. Мы добавили в наш редактор некоторый contentState (преобразовав html в обычный объект contentState, который понимает редактор). Затем Editor нужно было преобразовать каждый блок содержимого contentState в некоторый тег html, чтобы отобразить его нам. По умолчанию блок содержимого типа header-six будет преобразован в h6. Этим процессом можно управлять с помощью трех свойств, переданных в <Editor/>, которые мы будем здесь обсуждать: blockStyleFn, blockRenderMap и blockRendererFn. По сути, все они делают одно и то же: они определяют способ отображения блока содержимого в виде HTML.

Когда использовать каждый из этих реквизитов?

blockStyleFn

Когда? Мы хотим посмотреть на любые свойства блока содержимого (тип, текст, данные) и добавить класс css к визуализированному HTML.

Пример использования. Например, мы хотим, чтобы у каждого h1 с текстом «Вау» был желтый фон.

Код: codepen

(contentBlock) = {
  if (contentBlock.getText() === 'Hii') {
    return 'cssClassToUseOnEveryHii';
  }
}

blockRenderMap

Когда? Мы хотим посмотреть на тип блока содержимого (например, header-six), но отобразить что-то другое, кроме h6 - может быть, простой div или даже наш собственный компонент реакции.

Пример использования: например, мы хотим, чтобы каждая цитата отображалась как MyComponent.

Код: код для тега html, код для нашего собственного компонента

DefaultDraftBlockRenderMap.merge(
  Immutable.Map({
    'header-six': {
        element: 'h1', // or
        wrapper: MyComponent
    }
  })
);

blockRendererFn

Когда? Мы хотим посмотреть на любые свойства блока содержимого (тип, текст, данные) и на их основе отобразить наш собственный компонент реакции.

Пример использования:
Например, мы хотим, чтобы блок содержимого с { type: 'flowerImage', data: { color: 'blue' } отображался как MyBlueFlowerComponent

Код: codepen

const type = contentBlock.getType();
if (type === 'header-six') {
  return {
    component: MyComponent,
    props: { 
      plainText: contentBlock.getText()
    }
  };
}