React TypeScript中如何访问子组件的Props？

问题根源 #

React 18中children默认类型为ReactNode，包含字符串、数字、Fragment、null等多种类型。即便你声明children为ReactElement<DataColumnProps>[]，也无法覆盖嵌套Fragment等场景，TypeScript无法直接确认每个子元素的props类型，因此报错。

解决方案 #

1. 过滤+类型断言处理子组件 #

先将children转换为数组，过滤掉非有效元素，再断言子组件的props类型：

import { ReactElement, ReactNode, Children } from 'react';

interface DataColumnProps {
  label: string;
  // 其他自定义props
}

interface DataTableProps {
  children: ReactNode;
}

export const DataTable = ({ children }: DataTableProps) => {
  // 提取有效DataColumn子组件
  const columns = Children.toArray(children)
    .filter(child => React.isValidElement(child))
    .map(child => child as ReactElement<DataColumnProps>);

  // 安全访问label属性
  const columnLabels = columns.map(col => col.props.label);

  return (
    <div>
      {/* 组件渲染逻辑 */}
      {columns.map(col => col)}
    </div>
  );
};

2. 改用显式columns props（更推荐） #

放弃嵌套子组件的写法，让父组件直接传递columns数组，类型检查更严谨：

interface DataColumnProps {
  label: string;
  // 其他自定义props
}

interface DataTableProps {
  columns: DataColumnProps[];
}

export const DataTable = ({ columns }: DataTableProps) => {
  // 直接访问label，完全符合TypeScript类型要求
  const columnLabels = columns.map(col => col.label);

  return (
    <div>
      {columns.map((col, index) => (
        <DataColumn key={index} {...col} />
      ))}
    </div>
  );
};

// 使用示例
<DataTable
  columns={[
    { label: '姓名' },
    { label: '年龄' }
  ]}
/>

3. 自定义类型守卫（更严谨的嵌套写法） #

如果必须保留嵌套子组件结构，写一个类型守卫来校验子组件的props：

import { ReactElement, ReactNode, Children } from 'react';

interface DataColumnProps {
  label: string;
}

// 类型守卫：判断子元素是否为DataColumn组件
function isDataColumnElement(child: ReactNode): child is ReactElement<DataColumnProps> {
  return React.isValidElement(child) && 'label' in child.props;
}

interface DataTableProps {
  children: ReactNode;
}

export const DataTable = ({ children }: DataTableProps) => {
  const columns = Children.toArray(children).filter(isDataColumnElement);
  
  // columns类型自动推断为ReactElement<DataColumnProps>[]
  const columnLabels = columns.map(col => col.props.label);

  return <div>{columns}</div>;
};

注意事项 #

• 不要直接断言children为ReactElement<DataColumnProps>[]，若父组件传入非DataColumn的子组件，会引发运行时错误，过滤或类型守卫可避免此问题。
• React 18的Children.toArray()会自动扁平化Fragment中的子元素，无需担心嵌套<>影响结果。

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