为什么这个传递道具进入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组件中的子组件不是路由，而是Switch，因此foo不会作为道具传递给相应的组件。您需要做的是将您的路由嵌套为Home组件而不是子组件

主

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