SlateJS脚本node.children url和类型属性不存在

Question

TLDR: SlateJS序列化为HTML Property 'children' does not exist on type 'Node[]'的错误消息。

在SlateJS序列化文档上开播，但在tsx。

import React, { useCallback, useMemo, useState } from "react";
import escapeHtml from 'escape-html';
import { Editor, createEditor, Node, Text } from 'slate';
import { withHistory } from 'slate-history';

const serializeHTML = (node: Node[]) => {
  if (Text.isText(node)) {
    return escapeHtml(node.text)
  };

  const children = node.children.map((n: Node[]) => serializeHTML(n)).join('');

  switch (node.type) {
    case 'link':
      return `<a href="${escapeHtml(node.url)}">${children}</a>`
    case 'list-item':
      return ``
    case 'paragraph':
      return `<p>${children}</p>`
    case 'quote':
      return `<blockquote>${children}</blockquote>`
    default:
      return children
  };
};

对于子、类型和url，我得到以下属性错误。

• Property 'children' does not exist on type 'Node[]'
• Property 'type' does not exist on type 'Node[]'
• Property 'url' does not exist on type 'Node[]'

在我丰富的编辑中，我有：

const RichTextEditor = (props: RichTextEditorProps) => {
    const editor = useMemo(() => withImages(withHistory(withReact(createEditor()))), []);
  const [value, setValue] = useState<Node[]>(initialValue);
  const html = serializeHTML(value);
      
  return (
    <Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>
       ...
    </Slate>
  )

我已经有了类型依赖项。

• "@types/slate-react": "^0.22.9"
• "@types/slate": "^0.47.7",

Answer 1

serializeHTML()方法只需要一个节点，并从调用它的地方获得迭代器。

函数

const serializeHTML = (node: Node) => {
  ...

  const children = node.children.map((n: Node) => serializeHTML(n)).join('');
  ...
};

调用

const RichTextEditor = (props: RichTextEditorProps) => {
    const editor = useMemo(() => withImages(withHistory(withReact(createEditor()))), []);
  const [value, setValue] = useState<Node[]>(initialValue);
  
  const html = value.map(v => serializeHTML(v)).join('');
      
  return (
    <Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>
       ...
    </Slate>
  )
};

Answer 2

看起来，您正在尝试访问Node而不是Node上的属性。

还有几件事值得一提：

1. 较晚版本的板岩(.5x)是用TypeScript编写的，不应该需要显式类型安装。您列出的那些@type/xxx依赖项不是正确的类型。这是给.47x的。
2. 确保从板岩( Node )导入Node类型( import { Node } from 'slate' )。有一个全局可用的Node类型，如果您不使用它，它不是您想要的类型(这似乎不是您的问题，但是对于其他遇到类似错误的人来说，这一点值得一提)