React –如何在另一个已安装的组件内部渲染其他组件？

Question

Just wonder are there any approaches to render component in another component in React.

I render a <Scene /> component like this:

import Scene from './Scene';

ReactDOM.render(<Scene/>, document.getElementById('root'));

And at some point I need to render another component <Building /> (for example on onClick ) so that it should be inside <Scene />

At the current I'm trying to do so like this:

import Building from './Building';

ReactDOM.render(<Building/>, document.getElementById('fields'));

And this fields container inside this render() method is a child (pretty deep one) of <Scene />

Yes, it renders, it's located inside #fields in HTML, but if I go to React developer tools I see this:

<Scene></Scene>
<Building></Building>

React just rendering <Building> outside of <Scene> and I need quite the opposite.

Unfortunately, conditional rendering isn't the case.

Answer 1

You should only use one ReactDOM.render() , not multiple. It's common to create 1 component (often named <App /> ) and in that component you create logic. Basically, you create the whole app in Javascript/ReactJS, and you use that line to "load" it into your html.

export class App extends React.Component{
    render(){
        // It now returns only one component, but this is where you would put your react router
        return(
            <Scene />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('root'));


export class Scene extends React.Component{
    render(){
        return(
            <>
                <div> Your normal scene here and if you want <Building /></div>
                { orSomeVariableWhichHasToBeTrue && <Building />}
            </>
        );
    }
}

---

Also, I suggest trying to follow their Basics tutorial, I think you're missing the way React's intended use. Reading the Doc's again might help for some insights.