React，react.children + react.cloneElement 在使用扩展运算符时中断

Question

我正在使用React.children 渲染一些带有反应路由器的子路由（对于某个主路由下的所有子路由。

这对我来说效果很好，但是我之前正在解构我传递给孩子们的道具 -

const { prop1, prop2, prop3 } = this.props;

 const children = React.Children.map(this.props.children, (child) => {
  return React.cloneElement(child, {
    prop1,
    prop2,
    prop3
  });
});

这一直很好，但是最近我开始获得更多的道具，所以我想我可以通过像这样将道具传播到子对象中来让它变得更容易：

 const children = React.Children.map(this.props.children, (child) => {
  return React.cloneElement(child, {...this.props});
})

这似乎没问题，但我现在出现了一些奇怪的行为，我无法再从 react 路由器看到我的 routeParams (this.props.routeParams)。

似乎扩展运算符应该做同样的事情，只是代码更少，除非我误解了什么。

当我将其切换回非扩展运算符方法时，它可以正常工作。知道这是为什么吗？

Answer 1

React.Children.map 回调函数的第一个参数将设置回调的 this 上下文 (check the docs here)

当您将React.Children.map 回调的this 上下文作为第一个参数传递给回调时，您将其设置为值child。

所以不是将 this.props 传递给 cloneElement，而是传递 child.props.routeParams。