为何向this.props.children传递Props不生效？React技术求助

嘿，我来帮你排查这个问题！你尝试用React.cloneElement给this.props.children传递foo属性，但searchDate组件却读不到this.props.foo，结合你提到的React Router配置，我梳理了几个最可能的原因和对应的解决办法：

1. 你的子组件可能不是Home的直接子元素 #

如果你的searchDate是通过React Router的<Route>组件渲染的，那Home的直接子元素其实是<Route>，而不是searchDate。这时候你用React.cloneElement修改的是<Route>的props，而<Route>并不会自动把额外的props传递给它渲染的组件，所以searchDate自然拿不到foo。

举个例子，如果你的路由配置是类似这样：

<Home>
  <Route path="/search" component={searchDate} />
</Home>

那你需要针对<Route>做特殊处理，把foo传递给它的目标组件：

var children = React.Children.map(this.props.children, function (child) {
  // 判断当前子元素是否是Route组件
  if (child.type.name === 'Route') { // 或者直接对比child.type === Route，取决于你导入的方式
    const OriginalComponent = child.props.component;
    // 重新包装Route的component，把foo传递进去
    return React.cloneElement(child, {
      component: (routeProps) => <OriginalComponent {...routeProps} foo="1" />
    });
  } else {
    // 普通子组件直接传递props
    return React.cloneElement(child, { foo: "1" });
  }
});

如果是React Router v6版本，<Route>用element属性替代了component，那代码要改成这样：

var children = React.Children.map(this.props.children, function (child) {
  if (child.type.name === 'Route') {
    const OriginalElement = child.props.element;
    return React.cloneElement(child, {
      element: React.cloneElement(OriginalElement, { foo: "1" })
    });
  } else {
    return React.cloneElement(child, { foo: "1" });
  }
});

2. 检查子组件的类型和props使用方式 #

• 如果searchDate是函数组件，那它的props是通过参数传入的，不能用this.props访问：

  // 错误写法
  function searchDate() {
    console.log(this.props.foo); // 函数组件没有this，会报错
  }
  // 正确写法
  function searchDate(props) {
    console.log(props.foo); // 直接用参数props访问
  }
  

• 如果是类组件，要确保你正确继承了React.Component，并且没有拼写错误（比如把foo写成fooo）。

3. 排查中间组件是否拦截了props传递 #

如果Home和searchDate之间还有其他嵌套组件（比如高阶组件、布局组件），要确保这些组件把接收到的props完整传递给了它的子组件。比如某个中间组件的render方法里没有写{...this.props}，那foo就会被拦截。

验证小技巧 #

你可以在Home组件的map之后打印一下处理后的children，确认foo属性是否已经正确添加到目标组件上：

var children = React.Children.map(this.props.children, function (child) {
  // ...你的处理逻辑
});
console.log(children); // 查看组件结构和props

这样就能直观看到foo有没有出现在searchDate的props里啦。

内容的提问来源于stack exchange，提问作者Licheng Luo