是否可以根据子组件 props 推断父组件 props

Question

我想制作一个Tabs组件，active根据其子项作为name道具的内容推断道具的可能值。这就是我尝试这样做的方式：

import React from 'react'

interface TabProps<N extends string> {
  name: N
}

function Tab<N extends string>(props: TabProps<N>) {
  return null
}

type TabsType<N extends string = string> =
  | React.FunctionComponentElement<TabProps<N>>
  | React.FunctionComponentElement<TabProps<N>>[]

interface TabsProps<Tabs extends TabsType> {
  children: Tabs
  active: Tabs extends TabsType<infer N> ? N : unknown
}

export function Tabs<Tabs extends TabsType>(props: TabsProps<Tabs>) {
  return null
}

const test = (
  {/* I want active to be inferred as type 'bla' | 'hey' */}
  <Tabs active="blabla"> 
    <Tab name="bla" />
    <Tab name="hey" />
  </Tabs>
)

这里的问题似乎是组件的Tabs类型参数Tabs被推断为JSX.Element而不是React.FunctionComponentElement<TabProps<N>>[]它的结果是使用默认类型string，从而使无效值blabla不被打字稿注意到。

这有解决方法吗？这是 JSX 的基本限制吗？这是需要功能请求的东西吗？这是一个错误吗？

Answer 1

我发现目前似乎无法根据其子级的类型来推断父级 props。JSX 表达式最终总是属于 类型JSX.Element。这是当前实现 JSX 类型检查方式的限制。然而，这个问题解决了这个问题，因此希望这在更高版本的 typescript 中成为可能。