하위 구성 요소 클래스를 하위 구성 요소 클래스로 부모 구성 요소로 전달

Question

상위 구성 요소에 하위 구성 요소 클래스를 부모 구성 요소로 전달하는 방법.

내 부모 구성 요소 코드 :

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;