React+Slate开发出现TS错误：renderElement不存在于IntrinsicAttributes类型

错误产生原因 #

你使用的Editor组件本身不支持renderElement属性，对应两种常见场景：

• 你直接导入了Slate核心库中的Editor逻辑类，它是纯逻辑抽象，不是React UI组件，没有任何React相关的props定义。
• 如果你是自行封装的Editor组件，没有在组件的TS类型定义中声明renderElement属性，TS会校验不通过。

根据你参考的官方教程场景，大概率是你混淆了Slate的组件层级：Slate React的渲染结构是外层用<Slate>容器组件传递编辑器实例，内层用<Editable>组件负责内容渲染，renderElement属性是<Editable>组件的专有参数，不是传给顶层编辑器类的。

修复方案 #

方案1：使用标准Slate React组件结构（推荐） #

1. 修正依赖导入，从slate-react包中引入正确的UI组件，同时创建带React适配的编辑器实例：

import { useState, useCallback } from 'react'
import { createEditor, Descendant } from 'slate'
import { Slate, Editable, withReact, RenderElementProps } from 'slate-react'

// 声明编辑器初始内容
const initialValue: Descendant[] = [
  {
    type: 'paragraph',
    children: [{ text: '示例文本内容' }],
  },
]

2. 调整组件结构，将renderElement传给<Editable>组件：

export default function App() {
  // 初始化带React适配的编辑器实例
  const [editor] = useState(() => withReact(createEditor()))

  // 给renderElement参数添加TS类型避免隐式any报错
  const renderElement = useCallback((props: RenderElementProps) => {
    switch (props.element.type) {
      case "code":
        return <Code {...props} />
      default:
        return <Default {...props} />
    }
  }, [])

  return (
    <Slate editor={editor} initialValue={initialValue}>
      {/* renderElement挂载到Editable组件上 */}
      <Editable renderElement={renderElement} />
    </Slate>
  )
}

方案2：自定义Editor组件补充类型定义 #

如果你确实需要自行封装Editor组件，给组件补充renderElement属性的类型定义即可：

import type { RenderElementProps } from 'slate-react'

// 给自定义Editor组件声明props类型
type EditorProps = {
  renderElement: (props: RenderElementProps) => JSX.Element
  // 补充其他需要的属性定义
}

export default function Editor(props: EditorProps) {
  // 组件内部逻辑
}

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