Реагировать на машинописный текст и потомки

Question

Я пытаюсь динамически проверять в машинописном тексте типы реагирующих дочерних компонентов. Следующий код работает довольно хорошо, однако, похоже, машинописный текст не хочет, чтобы я деструктурировал детей.

Я получаю ошибку машинописного текста:

TS2339: Property 'type' does not exist on type 'ReactNode'.

Что я могу сделать, чтобы избавиться от машинописного текста ошибка вместо использования // @ ts-ignore.

import * as React from 'react';

    export interface AuxProps  { 
      children: React.ReactNode[]
    }

    export const Message: React.FC<AuxProps> = ({
      children,
    }: AuxProps) => {
      
      const test = children.filter(({ type }) => type === Test);

      return (
        <div>
          {test}
        <div/>
      );
    };

Answer 1

Вы не можете читать type из ReactChild, потому что ReactChild является объединением, и не каждый член этого объединения имеет свойство с именем type.

Фактически, только ReactElement s do.

Решение состоит в том, чтобы проверить две вещи внутри вашей предикатной функции:

• Является ли этот дочерний элемент ReactElement?
• Если да, то это элемент желаемого типа?

Код:

const test = children.filter(child => React.isValidElement(child) && child.type === 'Test');

Answer 2

Это потому, что по умолчанию ReactNode не имеет типа поля.

Вы можете просто добавить этот ключ, используя функцию &:

export interface AuxProps  { 
      children: (React.ReactNode & {type: string})[]
    }

Это добавит type стихиям.