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

Question

我想做一个 Tabs推断 active 的可能值的组件prop 基于它的 child 拥有的东西 name Prop 。这就是我尝试这样做的方式:

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被 typescript 忽视。
这有解决方法吗？这是 JSX 的基本限制吗？这是需要功能请求的东西吗？这是一个错误吗？

Answer 1

我不认为它可以像您想象的那样工作，因为 TypeScript 无法仅从组件的 JSX 子项中推断出那种类型信息。如果其他人有一个解决方案可以使您以任何形式工作，我会非常好奇。
最好的办法可能是抽象 <Tabs> 的 child 。到一个对象中，您可以为其推断出严格的(文字)类型信息。然后，使用泛型，您可以提取显式(文字)name值并在 active 上强制执行它支柱。 <Tabs>将简单地映射其 data数组到渲染的 JSX 中，这是 React 中非常常见的模式。

import React from 'react'

function Tabs<D extends readonly {name: string}[]>({data, active}: {data: D, active: D[number]["name"]}) {
  return (
    <div>
      {data.map(ea => {
        return <div className={active === ea.name ? 'active' : ''}>{ea.name}</div>;
      })}
    </div>
  );
}

const tabData = [
  {
    name: 'bla'
  },
  {
    name: 'hey'
  }
] as const;

const test = (
  <Tabs data={tabData} active="bla" />
)

试试看 TypeScript playground .请注意，如果您尝试更改 active支持除“bla”或“hey”以外的其他内容，它会警告您。
注意使用 as const申报时 tabData .这样做的好处是允许 TypeScript 推断 name 的显式(文字)字符串值。属性，即使它们嵌套在对象数组中。缺点是你不能先验地声明 tabData 的类型。例如，一个数组 TabObject s，因为根据定义 tabData 的形状必须在其文字声明时使用 as const 进行推断为了获得多汁的严格字符串值推断。
但是，由于 Tabs 的方式，您确实获得了一种有用的“延迟”类型检查。定义为:如果形状为 data无效， <Tabs>会提示它没有得到那个 Prop 的预期形状。
根据您首选的 React 范例，您可能不喜欢传递 data支持 <Tabs>并让它基于此呈现其子项，而不是您在上面尝试的组合方法。但是由于试图以您的方式推断类型的性质，我认为它无济于事。