为什么将此props传入this.props.children不起作用？

Question

我尝试使用以下代码将道具传递给this.props.children

export default class Home extends Component {
     render(){
var children = React.Children.map(this.props.children, function (child) {
return React.cloneElement(child, {
  foo: "1"
})
});
       return(            
         <div className="bla">
            <h1>WeDate</h1>
            <div className="child">
             {children}
        </div>)
     }

}

但是当它正常呈现时，我无法在我的searchDate组件中读取this.props.foo。 以下是我的反应路由器。

render(
    <Router>
        <Home>
            <Switch>
                <Route exact path="/"><Redirect to="/search" push/></Route>
                <Route exact path="/search" component={SearchDate}></Route>
            </Switch>
        </Home>
    </Router>
    ,document.getElementById('app')
);

Answer 1

Home组件的子代不是Route而是Switch，因此foo不会作为props传递给各个组件。 您需要做的就是嵌套您的路线是“家庭”组件，而不是作为子组件

家

export default class Home extends Component {
     render(){
       return(            
         <div className="bla">
            <h1>WeDate</h1>
            <div className="child">
             <Switch>
                <Redirect from="/" exact to="/search"/>
                <Route exact path="/search" render={(props) => <SearchDate foo={'1'} {...props}/>}>
            </Switch>
        </div>)
     }

}

路线

render(
    <Router>
        <Home />
    </Router>
    ,document.getElementById('app')
);