本文讨论如何自定义Draft默认块渲染。块渲染用于定义支持的块类型及其各自的渲染器，以及将粘贴的内容转换为已知的草稿块类型。

当粘贴内容或使用convertFromHTML草稿时，将粘贴的内容转换为相应的块渲染类型，方法是将“草稿”块渲染图与匹配的标签进行匹配。

HTML element  Draft block type
         header-one
         eader-two
         header-three
         header-four
         header-five
         header-six
 blockquote
        code-block
     atomic
         unordered-list-item,ordered-list-item**
        unstyled*

通过将不可变图传递给编辑器blockRender道具，可以覆盖Draft默认块渲染地图。

覆盖默认块渲染图的示例：

const blockRenderMap = Immutable.Map({
  'header-two': {
    element: 'h2'
  },
  'unstyled': {
    element: 'h2'
  }
});

class RichEditor extends React.Component {
  render() {
    return (
      
    );
  }
}

有些情况下，而不是覆盖默认值，我们只是想添加新的块类型; 这可以通过使用DefaultDraftBlockRenderMap引用来创建一个新的blockRenderMap来完成

const blockRenderMap = Immutable.Map({
  'section': {
    element: 'section'
  }
});

const extendedBlockRenderMap = Draft.DefaultDraftBlockRenderMap.merge(blockRenderMap);

class RichEditor extends React.Component {
  render() {
    return (
      
    );
  }
}

当Draft解析粘贴HTML时，它将HTML元素映射回草稿块类型。 如果要指定映射到特定块类型的其他HTML元素，则可以将数组aliasedElements添加到块配置。

未锁定块类型别名的使用示例：

'unstyled': {
  element: 'div',
  aliasedElements: ['p'],
}

默认情况下，html元素用于包装块类型，但也可以将一个 React 组件提供给blockRenderMap以包装EditorBlock。

在粘贴或使用convertFromHTML时，将扫描html以匹配标签元素。当blockRenderMap上有一个定义来包装该特定块类型时，将使用一个包装器。 例如：

Draft使用包装器将

class MyCustomBlock extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      

        {/* here, this.props.children contains a 
 container, as that was the matching element */}
        {this.props.children}
      

    );
  }
}

const blockRenderMap = Immutable.Map({
  'MyCustomBlock': {
    // element is used during paste or html conversion to auto match your component;
    // it is also retained as part of this.props.children and not stripped out
    element: 'section',
    wrapper: 
  }
});

// keep support for other draft default block types and add our myCustomBlock type
const extendedBlockRenderMap = Draft.DefaultDraftBlockRenderMap.merge(blockRenderMap);

class RichEditor extends React.Component {
  ...
  render() {
    return (
      
    );
  }
}