react 嵌套路由中, 在父组件中给children添加参数, 子组件为什么接收不到

Question

浏览器访问子组件路由/parent/child, 子组件为什么接收不到参数

父组件A
路由 /parent
parent.js

const Parent = props => {
  const { children } = props;
  const childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { a: 123 })

  console.log('childrenWithProps', childrenWithProps)
  // 在这里输出 childrenWithProps 中是有参数a的

  return (
      <div>
        {childrenWithProps}
      </div>
  );
};

export default Parent;

子组件B
路由 /parent/child
child.js

import React from 'react';

const Child = (props) => {

  console.log('Child', props, props.a)
  // 这里输出props, 为什么props 里会没有属性a?

  return (
    <div>child</div>
  )
}

export default Child;

路由文件
router.js

 {
    path: '/parent',
    component: './Parent',
    routes: [
      {
        path: '/parent/child',
        component: './Parent/Child',
      },
     ]
  }

Answer 1

已解决, 父组件少clone了一次.
parent.js

const Parent = props => {
  const { children } = props;
  
  // 1. 遍历children内层的组件 -> children.props.children , 克隆每个组件并添加上新的属性, 返回新的children.props.children
  const deepChildrenWithProps = React.Children.map(children.props.children, child => React.cloneElement(child, { a: 1 }));

  // 2. 用新的children.props.children 覆盖 chilren 里现有的 children.props.children
  const childrenWithProps = React.cloneElement(children, { children: deepChildrenWithProps });

  return (
      <div>
        {childrenWithProps}
      </div>
  );
};

export default Parent;