React+TypeScript中如何获取props.children的第一个子元素？

解决方法 #

首先，你的TempProps接口里缺少children的类型定义，需要先补上——React的props.children默认类型是React.ReactNode，它可以是单个元素、元素数组、字符串、null等多种类型：

import React from 'react';

interface TempProps {
    id: string;
    name: string;
    url: string;
    setEnable?: any;
    isEnable?: boolean;
    remove?: () => void; // 建议用更精确的函数类型替代Function
    children?: React.ReactNode; // 补上children的类型定义
}

接下来，要安全获取第一个子元素，推荐使用React内置的React.Children.toArray()方法，它会把任意类型的children转换成标准的元素数组，同时自动过滤掉null、undefined这类无效子元素：

export default (props: TempProps) => {
    validate(props);

    // 将children统一转换为数组格式
    const childrenArray = React.Children.toArray(props.children);
    // 获取第一个子元素，无有效子元素时为undefined
    const firstChild = childrenArray[0];

    // 可根据需求判断firstChild是否存在后再处理
    if (firstChild) {
        // 对第一个子元素执行逻辑
    }

    // ... 组件剩余逻辑
};

如果不想依赖内置方法，也可以手动判断类型处理，但需要覆盖更多边界情况：

export default (props: TempProps) => {
    validate(props);

    let firstChild: React.ReactElement | undefined;
    const children = props.children;

    if (React.isValidElement(children)) {
        // 子元素是单个React元素
        firstChild = children;
    } else if (Array.isArray(children)) {
        // 子元素是数组，筛选出第一个有效React元素
        firstChild = children.find(child => React.isValidElement(child));
    }

    // ... 组件剩余逻辑
};

注意：React.isValidElement()用于判断值是否为有效的React元素，避免把字符串、数字这类非元素类型误处理。

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