const renderElement = React.useCallback(props => {
  switch  {
    case 'heading':
      return ;
    case 'blockquote':
      return 
{props.children}
;
    default:
      return 
{props.children}
;
  }
}, );
const renderLeaf = React.useCallback(props => {
  let style = {};
  if  style.fontWeight = 'bold';
  if  style.fontStyle = 'italic';
  if  style.color = props.leaf.color;
  return 
           {props.children}
         ;
}, );

将这两个函数塞进 `` 中，即可kan到效果：

加粗/斜体切换：

// 切换当前选区是否加粗
const toggleBold = editor => {
   const isActive = !!Editor.marks?.bold;
   Transforms.setNodes(
     editor,
     { bold: !isActive },
     { match: Text.isText, split: true }
   );
};

插入链接：

const insertLink =  => {
   if  return;
   Transforms.wrapNodes(
     editor,
     { type: 'link', url, children:  },
     { split: true, at: editor.selection }
   );
};

# 列表转换：

const toggleList =  => {
   const isActive = Editor.isBlockActive;
   Transforms.unwrapNodes;
   const newProperties= {type:isActive?'paragraph':listType};
   Transforms.setNodes});
   if{
       const block= {type:listType+'-list',children:};
       Transforms.wrapNodes;
   }
};

# 使用 Chrome DevTools 查kan内部状态：Sla​te 的 Editor 对象本身就是一个普通 JS 对象，在控制台输入 `editor` Ke以直接kan到 `children` 树结构与 `selection` 信息。

# 保持 Immutable 思维：Sla​te 会在每次变geng后返回全新对象，请勿尝试手动修改 `editor.children.text`；否则 UI 将失去同步。

# 利用 onChange 捕获历史记录：Sla​te 提供了 `History` 插件，只要在创建 editor 时 `withHistory` 包裹，就Neng轻松实现撤销/重Zuo功Neng。

# 为每个自定义 Element 定义唯一 key：Sla​te 推荐使用 `data-slate-node` 属性，这样 React Neng够精准定位geng新区域，提高渲染效率。

# 当出现异常时先检查路径： Sla​te 所有操作dou基于路径定位节点，Ru果路径越界会抛出错误；使用 `Node.get` 检查是否真的存在目标节点再执行 Transform。

# 小心异步geng新：Sla​te 的内部状态是同步修改的，Ru果你在 `setTimeout` 中调用 `Transforms.insertText`，请确保先获取Zui新的 `editor.selection` 再操作，否则光标位置可Neng会错位。

"我第一次把自己的博客改造成支持图片上传、代码高亮以及实时预览，全靠 Slate！"

Sla​te 并不是“一站式解决所有需求”的黑盒子，它geng像是一套「底层砖块」+「自由组合规则」。只要弄清楚它的数据流——输入事件 → Transform → 新树 → React 渲染，你就拥有了无限 编辑器功Neng的钥匙。别再犹豫，把本文中的代码粘到自己的项目里跑一遍，然后大胆尝试添加自己的业务需求吧！祝你玩得开心，也欢迎在评论区分享你的奇思妙想～