React函数组件中如何向children子组件传递props？

完全可以实现给嵌套的children传递自定义props，但是不能直接在{children}上挂载属性传入，需要借助React内置API完成。
直接渲染{children}时，children是已经完成创建的React元素实例，而非组件函数本身，直接给其添加属性不会被React识别，子组件无法拿到对应值。

1. 引入React内置工具方法 #

在SidebarPage组件中从react包导入3个工具方法：

• Children：用于安全遍历children节点，处理children可能是单个元素、数组、falsy值等边界情况
• cloneElement：用于克隆已有的React元素，同时给克隆后的元素注入新的props
• isValidElement：用于校验节点是否为合法React元素，避免克隆文本、注释、null等非元素节点时报错

2. 在SidebarPage中克隆子元素注入props #

示例代码如下：

import { Children, cloneElement, isValidElement } from 'react';

const SidebarPage = ({ children }) => {
  // 自定义要透传给子组件的属性
  const injectedProps = {
    sidebarWidth: 240,
    closeSidebar: () => { /* 关闭侧边栏逻辑 */ },
    currentRoute: '/details'
  };

  return (
    <div className="sidebar-page-wrapper">
      {/* 遍历处理所有子节点 */}
      {Children.map(children, childNode => {
        // 仅对合法React元素做属性注入
        if (isValidElement(childNode)) {
          return cloneElement(childNode, injectedProps);
        }
        // 非元素节点（文本、注释、null等）直接返回不处理
        return childNode;
      })}
    </div>
  );
};

3. 在Details组件中接收注入的props #

和接收普通props完全一致，直接在组件参数中解构即可：

const Details = ({ sidebarWidth, closeSidebar, currentRoute }) => {
  return (
    <div style={{ paddingLeft: sidebarWidth }}>
      <p>当前路由：{currentRoute}</p>
      <button onClick={closeSidebar}>关闭侧边栏</button>
    </div>
  );
};

使用时保持原有嵌套写法即可，不需要手动给Details传递注入的属性：

<SidebarPage>
  <Details />
</SidebarPage>

• 该方式只会给SidebarPage的直接子元素注入props，Details内部的嵌套组件无法直接拿到这些属性，深层组件需要的话可以逐层透传，或者改用React Context做全局共享。
• 如果SidebarPage下有多个直接子元素，所有合法子元素都会收到注入的props，要注意避免props命名和组件自身传入的props冲突（cloneElement注入的props会和原有props合并，组件自身传入的同命名props优先级更高）。
• 如果要传递的属性属于全局共享状态（比如用户信息、主题配置、侧边栏全局状态），优先使用Context方案，可维护性比cloneElement透传更高。

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