React Native转TypeScript：如何检测子组件的特定类型

问题背景 #

将大型React Native项目从PropTypes迁移到TypeScript时，遇到了子组件作用域组织的类型检测问题。原项目通过ListItem.Left、ListItem.Content、ListItem.Right这种方式组织子组件，在JavaScript中通过child.type.name判断子组件类型并赋值，但TypeScript中无法直接沿用该逻辑。

原JavaScript实现代码 #

const styles = StyleSheet.create({
    listItem: ...,
    leftItem: ...,
    contentItem: ...,
    rightItem: ...,
})
const ListItemLeft = ({ children }) => <View style={styles.leftItem}>{children}</View>;
const ListItemContent = ({ children }) => <View style={styles.contentItem}>{children}</View>;
const ListItemRight = ({ children }) => <View style={styles.rightItem}>{children}</View>;
class ListItem extends Component {
    render() {
        let left = null, right = null, content = null;
        const otherChildren = [];
        React.Children.forEach(children, child => {
          if (child) {
            if (child.type.name === ListItemLeft.name) {
              left = child;
            } else if (child.type.name === ListItemRight.name) {
              right = child;
            } else if (child.type.name === ListItemContent.name) {
              content = child;
            } else {
              otherChildren.push(child);
            }
          }
        });
        return (
            <View style={styles.listItem}>
                {left}
                {content}
                {right}
                {otherChildren}
            </View>
        );
    }
}
ListItem.Left = ListItemLeft;
ListItem.Content = ListItemContent;
ListItem.Right = ListItemRight;
export default ListItem;

组件使用方式 #

<ListItem>
    <ListItem.Left>Left content</ListItem.Left>
    <ListItem.Content>Main content</ListItem.Content>
    <ListItem.Right>Right content</ListItem.Right>
</ListItem>

TypeScript迁移中的困惑 #

当前TypeScript代码片段中，无法正确检测子组件类型并赋值：

let left : React.ReactElement<typeof ListItemLeft> | null = null, 
    right : React.ReactElement<typeof ListItemRight> | null  = null,
    content : React.ReactElement<typeof ListItemContent> | null = null;
const otherChildren: React.ReactNode[] = [];

React.Children.forEach<React.ReactNode>(children, child => {
    /* how to test child type and assign to left, right, content or other? */
});

解决方案 #

1. 给子组件添加唯一静态标识 #

避免依赖易被压缩混淆的name属性，给每个子组件添加自定义静态属性作为类型标识：

const ListItemLeft = ({ children }: { children: React.ReactNode }) => (
  <View style={styles.leftItem}>{children}</View>
);
// 添加静态类型标识
ListItemLeft.componentType = 'ListItemLeft' as const;

const ListItemContent = ({ children }: { children: React.ReactNode }) => (
  <View style={styles.contentItem}>{children}</View>
);
ListItemContent.componentType = 'ListItemContent' as const;

const ListItemRight = ({ children }: { children: React.ReactNode }) => (
  <View style={styles.rightItem}>{children}</View>
);
ListItemRight.componentType = 'ListItemRight' as const;

2. 定义子组件类型集合 #

统一管理子组件的类型，方便TypeScript做类型推断：

type ListItemChild = 
  | React.ReactElement<typeof ListItemLeft>
  | React.ReactElement<typeof ListItemContent>
  | React.ReactElement<typeof ListItemRight>
  | React.ReactNode;

3. 遍历子组件时做类型检测与赋值 #

通过React.isValidElement判断是否为React元素，再通过静态标识匹配类型：

let left: React.ReactElement<typeof ListItemLeft> | null = null,
    right: React.ReactElement<typeof ListItemRight> | null = null,
    content: React.ReactElement<typeof ListItemContent> | null = null;
const otherChildren: React.ReactNode[] = [];

React.Children.forEach(children, (child) => {
  // 非React元素直接加入其他子组件
  if (!React.isValidElement(child)) {
    otherChildren.push(child);
    return;
  }

  // 断言为我们定义的子组件类型
  const typedChild = child as ListItemChild;

  // 通过静态标识判断类型并赋值
  switch (typedChild.type.componentType) {
    case 'ListItemLeft':
      left = typedChild;
      break;
    case 'ListItemContent':
      content = typedChild;
      break;
    case 'ListItemRight':
      right = typedChild;
      break;
    default:
      otherChildren.push(child);
  }
});

4. 完善ListItem类的类型定义 #

给类组件添加props类型声明，并明确静态子组件的类型：

interface ListItemProps {
  children: React.ReactNode;
}

class ListItem extends React.Component<ListItemProps> {
  static Left = ListItemLeft;
  static Content = ListItemContent;
  static Right = ListItemRight;

  render() {
    // 放入上述遍历逻辑
    return (
      <View style={styles.listItem}>
        {left}
        {content}
        {right}
        {otherChildren}
      </View>
    );
  }
}

内容的提问来源于stack exchange，提问作者Mike