React TypeScript中如何访问Props的子元素内容？

AI 小北

2026-8-12

在React TypeScript中获取子元素的文本内容

1. 定义Props类型

针对你场景里子元素为单个React元素（<button>）的情况，可将children类型定义为React.ReactElement：

interface MyComponentProps {
  children: React.ReactElement;
}

如果需要支持多子元素场景，可改用React.ReactNode，后续处理逻辑需做调整。

2. 提取单元素的文本内容

子元素的文本内容存储在其props.children中，结合TypeScript类型断言即可获取：

const MyComponent: FC<MyComponentProps> = ({ children }) => {
  // 断言子元素的props.children为字符串类型
  const string = children.props.children as string;
  console.log(string); // 输出 "Click me"

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

3. 通用文本提取方案（支持嵌套/多元素）

如果子元素存在嵌套结构或混合内容（文本+其他元素），可通过递归函数提取所有文本内容：

const extractText = (node: React.ReactNode): string => {
  if (typeof node === 'string' || typeof node === 'number') {
    return String(node);
  }
  if (Array.isArray(node)) {
    return node.map(extractText).join('');
  }
  if (React.isValidElement(node)) {
    return extractText(node.props.children);
  }
  return '';
};

// 使用通用函数
const MyComponent: FC<{ children: React.ReactNode }> = ({ children }) => {
  const string = extractText(children);
  console.log(string); // 输出 "Click me"

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