javascript - React – 如何在另一个已安装的组件中渲染附加组件？

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 /> 的子级(相当深的一个)

是的，它渲染了，它位于 #fields 内在 HTML 中，但如果我转到 React 开发人员工具，我会看到以下内容:

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

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