Question

我正在将Material UI用于React。我有一个“ TabHeader”组件，其中包含“ Tab”组件的列表。

这些定义如下：

children?: React.ReactElement<TabProps>[];

我如何使用它们的示例：

<TabHeader>
   <Tab value="val1" label="Label1" />
   <Tab value="val2" label="Label2" />
</TabHeader>

直到这里都可以工作。

某些“制表符”是有条件的，因此我想将它们包装如下：

{someCondition && <Tab value="val1" label="Label1" />}

但是出现以下错误：

Type 'false' is not assignable to type 'ReactElement...

如何定义一个采用Tabs或false（如果为true的类型，则不会触发该错误）的类型。

Answer 1

将子级定义为'element'或'boolean'（false）的数组：

children?: (React.ReactElement<TabProps> | boolean)[];

Answer 2

出现TypeScript错误是因为您将false作为子元素传递，但是false与您为children提供的类型不匹配。由于false不满足React.ReactElement<TabProps>的类型，因此TypeScript会告诉您类型不兼容。

要实现此目的，您需要接受false作为子元素。该类型的定义可能看起来像

children?: (React.ReactElement<TabProps> | false)[];

有关JS和类型定义的更多上下文：

当someCondition为false时，它将返回false。当someCondition为true时，它将返回最后一个条件的结果-在这种情况下为JSX元素<Tab>。

{someCondition && <Tab value="val1" label="Label1" />}

通过查看等效的三元逻辑，这可能更容易理解：

{someCondition
  ? <Tab value="val1" label="Label1" />
  : false
}

将子级标记为可选（children?）可让您要么传递所有有效的子级，要么不传递任何有效的子级。所以像这样的事情会起作用

<Tab value="val1" label="Label1" ></Tab>

所以

<TabHeader>
   <Tab value="val1" label="Label1" />
   <Tab value="val2" label="Label2" />
</TabHeader>

但是以下操作无效，因为类型可能为false。以下JSX：

<TabHeader>
   <Tab value="val1" label="Label1" />
   {someCondition && <Tab value="val2" label="Label2" />}
   <Tab value="val3" label="Label3" />
</TabHeader>

将通过以下子项：

[
  <Tab value="val1" label="Label1" />,
  false,
  <Tab value="val3" label="Label3" />,
]

someCondition为假时。

反应组件儿童道具的“条件”类型是什么？

2 个答案: