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

Question

我正在使用 React.children 渲染一些带有 react router 的子路由(对于某个主路由下的所有子路由。

这对我来说一直很好，但是我之前正在解构传递给 children 的 Prop -

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

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

这一直工作得很好，但是最近我开始获得更多的 Prop ，所以我想我可以通过像这样将 Prop 散布到子对象中来让它变得更容易:

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

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

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

当我将其切换回非传播运算符方法时，效果很好。知道这是为什么吗？

Answer 1

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

当您将 React.Children.map 回调的 this 上下文作为第一个参数传递给回调。

So rather than passing this.props to cloneElement you are passing child.props.routeParams.