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

时间:2019-05-19 13:34:04

标签: javascript reactjs

想知道是否有任何方法可以在React的另一个组件中渲染组件。

我这样渲染<Scene />组件:

import Scene from './Scene';

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

在某个时候,我需要渲染另一个组件<Building />(例如在onClick上),以便它应位于<Scene />内部

目前,我正在尝试这样做:

import Building from './Building';

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

fields方法中的render()容器是<Scene />的子对象(相当深)

是的,它呈现在HTML的#fields内部,但是如果我使用React开发人员工具,我会看到:

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

只在<Building>之外渲染<Scene>,我需要相反的做法。

不幸的是,条件渲染并非如此。

1 个答案:

答案 0 :(得分:2)

您只能使用一个ReactDOM.render(),而不是多个。创建1个组件(通常命名为<App />)是很常见的,然后在该组件中创建逻辑。基本上,您可以使用Javascript / ReactJS创建整个应用,然后使用该行将其“加载”到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 />}
            </>
        );
    }
}

此外,我建议尝试遵循其基础知识教程,我认为您缺少了React的预期用途。再次阅读文档可能有助于获得一些见解。