React富文本编辑器开发（四）

上一节我们做了块级元素的格式操作，这节我们来讲行内元素的相关操作。行内元素的样式一般指 粗体、斜体、代码或 删除线等 。通过前一章的内容得知，元素的渲染是通过渲染器来呈现的，块级元素通过指定 renderElement, 行内元素（即内联元素）在 Slate中也叫 叶子，通过指定 renderLeaf来渲染。即然叶子也是元素，那么就要设计样式。我们来设计一个粗体组件。创建一个新文件，将所有叶子组件放在这里

_leaf.jsx

export const Leaf = ({
    
     attributes, children, leaf }) => {
   
   
    if (leaf.bold) {
   
   
        children = <strong>{
   
   children}</strong>
    }

    if (leaf.code) {
   
   
        children = <code>{
   
   children}</code>
    }

    if (leaf.italic) {
   
   
        children = <em>{
   
   children}</em>
    }

    if (leaf.underline) {
   
   
        children = <u>{
   
   children}</u>
    }

    return <span {
   
   ...attributes}>{
   
   children}</span>
}

当然还要有渲染器，同样我们把叶子的渲染器也独立出来，创建一个文件，如下所示：

_leafRender.jsx

import React from 'react'
import {
   
    Leaf } from './_leaf'

export const renderLeaf = props => {
   
   
    return <Leaf {
   
   ...props} />
};

我们把上一节的块元素的渲染器也独立出来：

_elementRender.jsx

import React from 'react';
import {
   
    CodeElement, DefaultElement } from './_elements';

export const renderElement = props