React丨Umi this.props.children传参数

问题描述

ant.design 全局layout不能给它的子组件传参数 ?

• layouts/index.js :

<Layout>
    {
        React.Children.map(this.props.children, child => {
            return React.cloneElement(child, {"test": "test"})
        })
    }
</Layout>

子组件 获取 this.props.test 是undefined

解决方案

layout 里需 clone 两级，因为第一级是 Switch，然后才是 Route。

React.Children.map(children, child => {
  return React.cloneElement(child, null, React.Children.map(child.props.children, child => {
    return React.cloneElement(child, { test: 'test' });
  }));
})

参考资料

https://github.com/umijs/umi/issues/971
https://github.com/umijs/umi/pull/1282