反应打字稿和 children

Question

我尝试在打字稿中动态检查 React children 组件的类型。以下代码运行良好，但似乎打字稿不希望我解构 children.

我收到 Typescript 错误：

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

这是因为默认ReactNode没有字段类型

您可以使用 & 功能简单地添加该密钥：

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

这会将 type 添加到元素中。

Answer 2

您无法从 ReactChild 读取 type，因为 ReactChild 是一个联盟，并非该联盟的每个成员都有一个名为 [=11= 的属性 ].

事实上，只有 ReactElement 会。

解决方案是在谓词函数中检查两件事：

这是child一个ReactElement吗？
如果是，那么该元素是否属于所需类型？

代码：

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

反应打字稿和 children

React typescript and children

children

typescript

reactjs