如何在React.cloneElement中获取组件文本实现表头自动国际化翻译

完全可以实现，核心是利用React.cloneElement的第三个参数——这个参数就是用来传入替换后的子节点，只要在克隆表头的时候把原文本替换成翻译后的内容即可。

基础实现（仅处理th内直接为纯文本的场景） #

如果你的表头<th>内直接写纯文本，没有嵌套其他元素，直接修改Table组件逻辑即可：

// 根据你实际用的翻译库调整引入逻辑，这里以react-i18next为例
import { useTranslation } from 'react-i18next';
import React from 'react';

const Table = ({headers}) => {
    const { t } = useTranslation(); // 先获取翻译函数
    
    const clonedHeaders = React.Children
            .toArray(headers.props.children)
            .map(header => {
                const originalText = header.props.children;
                // 仅翻译纯字符串内容，非字符串内容保持原样
                const translatedContent = typeof originalText === 'string' 
                    ? t(originalText) 
                    : originalText;

                // 克隆时第三个参数传入翻译后的内容，替换原文本
                return React.cloneElement(header, {
                    className: "text-gray-900 py-3 font-light text-xs"
                }, translatedContent);
            });

    return <table>
         <thead>
            <tr>
                {clonedHeaders}
            </tr>
         </thead>
    </table>
}

改完之后开发者不需要手动给每个表头文本加t()，直接写<th>Name</th>就能自动完成翻译。

进阶实现（支持th内嵌套元素的场景） #

如果你的表头可能嵌套其他元素，比如<th><span>Name</span></th>，可以加一个递归工具函数处理所有子节点里的纯文本：

import { useTranslation } from 'react-i18next';
import React from 'react';

// 递归翻译子节点里所有纯文本的工具函数
const translateAllChildren = (children, translateFn) => {
  return React.Children.map(children, child => {
    // 纯文本直接翻译
    if (typeof child === 'string') {
      return translateFn(child);
    }
    // 是React元素的话递归处理它的子节点
    if (React.isValidElement(child)) {
      return React.cloneElement(
        child, 
        {}, 
        translateAllChildren(child.props.children, translateFn)
      );
    }
    // 其他类型内容保持原样
    return child;
  });
};

const Table = ({headers}) => {
    const { t } = useTranslation();
    
    const clonedHeaders = React.Children
            .toArray(headers.props.children)
            .map(header => {
                const translatedChildren = translateAllChildren(header.props.children, t);
                return React.cloneElement(header, {
                    className: "text-gray-900 py-3 font-light text-xs"
                }, translatedChildren);
            });

    return <table>
         <thead>
            <tr>
                {clonedHeaders}
            </tr>
         </thead>
    </table>
}

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