為什么將此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')
);