Übergeben von Zuständen an this.props.children mit verschachtelten Routen

Question

Ich stimme zu, dass mehrere Fragen gleichzeitig gestellt werden. Ich habe einige Stunden lang recherchiert, konnte diesen leicht erkennbaren Fehler jedoch nicht beheben. Nach How to pass props to {this.props.children} Post, ich verstehe die einfache Verwendung von React.cloneElement und React.Children.

Nach meiner Eltern Klasse:

class AboutPage extends React.Component { 

constructor(props, context){ 
    super(props, context); 

    this.state = { 
     details: "details" 
    } 
} 
render() { 

    const childrenWithProps = React.Children.map(this.props.children, 
     (child) => { 
      React.cloneElement(child, { 
       details: this.state.details 
      }) 
     } 
    ); 

    return (
     <div className="jumbotron"> 
      <h1>About</h1> 
      <p>This application uses React, Redux, React Router and other libs for our EducationOne Project</p> 
      <Link to="/about/Owner"> 
       <Button color="primary">test</Button> 
      </Link> 
      {childrenWithProps} 
     </div> 

    ); 
    } 
} 

AboutPage.PropTypes = { 
    children: PropTypes.object.isRequired 
}; 

Es folgt mein Kind Komponente:

const Owner = (props) => { 
return (
    <div>Owner details: {props.details}</div> 
); 
}; 

Anstatt das Kind oder ein Elternteil zu importieren, verschachtelt i die Strecke in meinem routes.js eine erstellen Kind für aboutPage:

export default (
<Route path="/" component={App}> 
    <IndexRoute component={Login} /> 
    <Route path="home" component={HomePage}/> 
    <Route path="about" component={AboutPage}> 
     <Route path="omkar" components={Omkar} /> 
    </Route> 
    <Route path="courses" component={CoursesPage}> 
     {/*<IndexRoute components={CourseDetailsAndList}/>*/} 
    </Route> 
</Route> 
); 

Allerdings sehe ich keinen Fehler oder eine Nachricht in der Konsole, noch die untergeordnete Komponente geladen, wenn ich auf die Schaltfläche klicken, um die untergeordnete Komponente zu laden.

Jede Hilfe wird wirklich geschätzt.

Answer 1

Das Problem liegt in Ihrer map Funktion. Der Callback-Pfeil function has block body mit Klammern und so müssen Sie explizit Ihr geklontes Element mit dem Schlüsselwort return zurückgeben.

In einem kurzen Text wird nur ein Ausdruck benötigt, und eine implizite Rückgabe ist angefügt. In einem Blockkörper müssen Sie eine explizite Rückgabe Anweisung verwenden.

const childrenWithProps = React.Children.map(this.props.children, child => { 
    return React.cloneElement(child, { 
    details: this.state.details 
    }); 
});