SlateJS富文本编辑器事件传递疑问：拆分Toolbar后editor未定义

你遇到的editor is undefined错误，核心问题是组件参数接收方式错误，加上没有正确利用Slate的内置机制获取editor实例，具体修正方案如下：

错误原因 #

1. React组件的参数是props对象，你在App里用<MyToolbar {...editor} />是把editor的所有属性平铺传递给组件，而非将editor作为单独的props属性；但你的MyToolbar组件直接把editor当作参数接收，自然拿不到正确实例。
2. Slate本身提供了更规范的方式在子组件中获取editor，无需手动传递。

修正方案 #

方案一：修正props传递与接收方式 #

修改App组件中传递toolbar的代码，将editor作为props属性传递：

export function App(){
 //...其他代码

 const [editor] = useState(() => withReact(createEditor()));
 return (
   <Slate {...props} >
     <MyToolbar editor={editor} /> {/* 改为传递editor属性 */}
     //...其他内容
   </Slate>
 );
}

修改MyToolbar组件，从props中解构出editor：

function MyToolbar({ editor }: { editor: ReactEditor }){ // 解构props里的editor
   return (
      <div>
        <span 
          {...props} 
          onMouseDown={event => {
            event.preventDefault();
            CustomEditor.toggleBold(editor);
          }}
        ></span>
      </div>
   );
}

方案二：使用Slate内置的useSlate钩子（更推荐） #

Slate提供了useSlate钩子，只要组件在<Slate>内部，就可以直接获取editor实例，无需手动传递：

// 先引入useSlate
import { useSlate } from 'slate-react';

function MyToolbar(){
   const editor = useSlate(); // 直接通过钩子获取editor
   return (
      <div>
        <span 
          {...props} 
          onMouseDown={event => {
            event.preventDefault();
            CustomEditor.toggleBold(editor);
          }}
        ></span>
      </div>
   );
}

App组件里无需传递editor，直接使用组件即可：

export function App(){
 //...其他代码

 const [editor] = useState(() => withReact(createEditor()));
 return (
   <Slate {...props} >
     <MyToolbar /> {/* 无需传递editor */}
     //...其他内容
   </Slate>
 );
}

这样就能解决editor is undefined的问题，同时代码也更符合Slate的设计规范。

内容的提问来源于stack exchange，提问作者HappyKoala