ReactJS Добавление компонента к определенному идентификатору

Question

У меня проблемы с "добавлением" дочернего компонента (NewPageSidear) к определенному идентификатору выше и выше (Main) родительского компонента (NewPage), который загружает дочерний компонент.

У меня есть следующая структура DOM, созданная в Main.jsx, которая загружается при загрузке страницы в index.html:

render(){
    return(
        <div id="wrapper" className="wrapper">
            <Header />
            <div id="content" className="content">
                <Sidebar />
                <div id="main" className="main">
                    <div className="section-title">
                        <h2>{this.state.pageTitle}</h2>
                    </div>
                    <div id="main-content" className="main-content"></div>
                    <Footer />
                </div>
            </div>
        </div>
    );
}

При загрузке страницы я делаю:

ReactDOM.render(<Dashboard/>,document.querySelector('#main-content'));

На странице Dashboard я нажму кнопку, которая выполнит следующее, и заменит Dashboard на NewPage:

ReactDOM.render(<NewPage/>,document.querySelector('#main-content'));

Моя проблема здесь:

Когда загружается NewPage, есть дочерний компонент NewPageSidebar, который я хочу добавить к #content.Если я могу получить NewPageSidebar для добавления #content, тогда я могу использовать componentWillUnmount для удаления NewPageSidebar при размонтировании.Но как мне добавить NewPageSidebar к #content?Любая помощь очень ценится.

Answer 1

Вы можете сделать что-то вроде:

 ReactDOM.render(<NewPage newSidebar={true}/>,document.querySelector('#main-content'));

А в NewPage:

render(){
    return(
        <div id="wrapper" className="wrapper">
            <Header />
            <div id="content" className="content">
                <Sidebar />
                {this.props.newSidebar ? <NewSidebar /> : null}
                <div id="main" className="main">
                    <div className="section-title">
                        <h2>{this.state.pageTitle}</h2>
                    </div>
                    <div id="main-content" className="main-content"></div>
                    <Footer />
                </div>
            </div>
        </div>
    );
}