Внимание: Редактор 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()
}
};
}