親コンポーネントへの親コンポーネントへの子コンポーネントクラスの受け渡し

Question

子コンポーネントクラスをReactの親コンポーネントに渡す方法。

私の親コンポーネントコード：

import React, { Component } from 'react'; 
import { DashBoard } from './DashBoard/DashBoard'; 
import { DashBoard } from './Details/Details'; 

class ContentArea extends Component { 
    render() { 
    return (
     <div className="content-wrapper"> 
     <DashBoard /> 
     <Details /> 
     </div> 
    ) 
    } 
} 

export default ContentArea; 

そして、私の子コンポーネントコード：

import React, { Component } from 'react'; 

export class DashBoard extends Component { 
    render() { 
    return (
     <h1>This is DashBoard Page.</h1> 
    ); 
    } 
} 

そして、私のRoute.jsコード：

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import { BrowserRouter as Router, Route } from 'react-router-dom'; 

import { App } from './App'; 
import { DashBoard } from './components/DashBoard/DashBoard'; 
import { Details } from './components/Details/Details'; 


export class AppRoute extends Component { 
    render() { 
    return (
     <Router> 
     <div> 
      <Route exact path={'/'} component={App} /> 
      <Route path={'/DashBoard'} component={DashBoard} /> 
      <Route path={'/Details'} component={Details} /> 
     </div> 
     </Router> 
    ); 
    } 
} 

App.js：

import React, { Component } from 'react'; 

import SideBar from './components/SideBar'; 
import Footer from './components/Footer'; 
import Header from './components/Header/Header'; 
import ContentArea from './components/ContentArea'; 

export class App extends Component { 
    render() { 
    return (
     <div className="skin-purple"> 
     <Header /> 
     <SideBar /> 
     <ContentArea /> 
     <Footer/> 
     </div> 
    ); 
    } 
} 

これで、すべての子コンポーネントを親コンポーネントに渡したいと思います。そして、子コンポーネントをルーティングする間、親コンポーネントの内部でレンダリングされるべきです。

誰も私がそれを達成する方法を助けることができますか？

Answer 1

ContentAreaはAppコンポーネント内にあり、DashBoardとDetailsをレンダリングする場合は、ネストされたルートをContentAreaレベルに指定できます。

export class AppRoute extends Component { 
    render() { 
    return (
     <Router> 
     <div> 
      <Route path={'/'} component={App} /> 
     </div> 
     </Router> 
    ); 
    } 
} 


import { DashBoard } from './DashBoard/DashBoard'; 
import { Details } from './Details/Details'; 
class ContentArea extends Component { 
    render() { 
    return (
     <div className="content-wrapper"> 
     <Route exact path={'/DashBoard'} component={DashBoard} /> 
     <Route exact path={'/Details'} component={Details} /> 
     </div> 
    ) 
    } 
} 

export default ContentArea;