检索JSX子节点的类型

Question

我正面临着一个挑战，我必须根据子组件的类型来组织它们。

假设我们有一个名为Modal的父组件，定义如下:

interface IModalProps {
children: ModalHeader | ModalBody | ModalFooter;
}
function Modal({ children }: IModalProps) { ... }

还有其他子组件将嵌套在父Modal组件中;

function ModalHeader(props) { ... }
function ModalBody(props) { ... }
function ModalFooter(props) { ... }

我想做的是在我的index.tsx中使用这些组件，如下所示;

<Modal>
<ModalHeader />
<div /> { /* Desired error: type 'div' does not exist in type 'ModalHeader | ModalBody | ModalFooter' */ }
<ModalBody />
<ModalFooter />
</Modal>

因此，通过使用IModalProps接口定义的children属性，我可以访问Modal组件中的所有这些嵌套组件，在如上嵌套它们之后。然而，它只会给我数组中的组件，我不知道哪个元素代表哪个子组件。我希望能够在父组件中识别这些子组件的类型，这样我就可以使用它们来应用特定的条件或布局。例如，我可能想把ModalHeader组件放在div中，在那里我应用了特殊的条件和样式，或者我可能想通过使用关于它们类型的信息，为所有子组件设置一个特定的显示顺序作为布局约束。

有没有办法让我实现这一点，而不传递这些组件作为命名属性?

谢谢。

Answer 1

您可以将子道具的type属性与相关组件类型或Modal组件中的type.name属性进行比较，如下所示:

React.Children.forEach(children, child => {
if (child.type === ModalHeader || child.type.name === ModalHeader.name) {
console.log('Header Component');
}
});

注意:只需要检查一次(type或type.name)，这取决于您正在使用的软件包的版本。