Question

我在将子组件（NewPageSidear）“附加”到正在加载父组件（Main）的父组件（NewPage）上方和外部（Main.jsx）的特定ID时遇到麻烦。子组件。

我具有在index.html中创建的以下DOM结构，该结构在页面加载到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附加到( [cdefgab] ) # (1) ( [b#]{0,1} ) # (2) ( [0-9] ) # (3) | ( [0-9]{3} ) # (4) | ( [A-Z0-9]{2} ) # (5)上？任何帮助都非常感谢。

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>
    );
}

ReactJS追加组件到特定ID

1 个答案: