Question

想知道是否有任何方法可以在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>，我需要相反的做法。

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

Answer 1

您只能使用一个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的预期用途。再次阅读文档可能有助于获得一些见解。

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

1 个答案: