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});
})

这似乎没问题，但我现在得到一些奇怪的行为我再也看不到来自反应路由器的routeParams（this.props.routeParams} 。

似乎扩展运算符应该做同样的事情，只需要少量代码，除非我误解了一些东西。

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

Answer 1

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

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

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

当使用spread运算符时，React，react.children + react.cloneElement会中断

1 个答案: