Блог

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",

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>
  )
};
  

Похоже, что вы пытаетесь получить доступ к свойствам массива узлов вместо Узла.

Пара других вещей, о которых стоит упомянуть:

1. Более поздние версии Slate (.5x) написаны на TypeScript и не должны требовать установки явных типов. Перечисленные вами зависимости @types / xxx не являются правильными типами. Они предназначены для .47x.
2. Обязательно импортируйте Node тип из Slate ( import { Node } from 'slate' ). Существует глобально доступный Node тип, который будет использоваться, если вы этого не сделаете, и это не тот, который вам нужен (похоже, это не ваша проблема, но стоит упомянуть для всех, кто сталкивается с подобными ошибками)