反应打字稿和孩子

Question

我尝试动态检查打字稿中反应子组件的类型。 以下代码运行良好，但是似乎打字稿不想让我破坏孩子。

我收到Typescript错误：

az postgres server configuration set --name max_connections --resource-group myresourcegroup --server mydemoserver --value 100

除了使用// @ ts-ignore之外，我还能摆脱打字错误吗？

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

Answer 1

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

您只需使用＆功能即可添加该键：

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

这会将type添加到元素中。

Answer 2

您无法从type中读取ReactChild，因为ReactChild是一个联合，并且并非该联合的每个成员都有一个名为type的属性。

实际上，只有ReactElement个。

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

• 这个孩子是ReactElement吗？
• 如果是，那么该元素是否为所需类型？

代码：

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