使用場景：

• 需要對子組件進行統一處理（如添加?key、包裹額外元素、過濾特定類型等）。

• 動態修改?children?的 props 或結構。

示例代碼：遍歷并修改?children

import React from 'react';// 一個組件，給每個子項添加邊框和序號
const ListWithIndices: React.FC = ({ children }) => {return (<div>{React.Children.map(children, (child, index) => {// 檢查是否是有效的 React 元素（避免處理字符串、數字等）if (React.isValidElement(child)) {// 克隆元素并添加新 props（如 `data-index`）和樣式return React.cloneElement(child, {style: { border: '1px solid #ccc', padding: '8px', margin: '4px' },'data-index': index,});}return child; // 非 React 元素直接返回})}</div>);
};// 使用方式
const App = () => {return (<ListWithIndices><div>Item 1</div><div>Item 2</div><span>Item 3</span>{"純文本也會被渲染"}</ListWithIndices>);
};

關鍵點：

• React.Children.map：安全遍歷?children（即使?children?是單個元素或數組）。

• React.isValidElement：檢查是否為合法的 React 元素（避免處理字符串、數字等原始類型）。

• React.cloneElement：克隆元素并修改/添加 props。