如何調用ReactDOM.render中存在的特定組件

Question

我有2個組件要呈現在myProject-init.js的單個div中，一次呈現1個。 但是兩者都被稱為並行。

myProject-init.js文件：

ReactDOM.render(
<div>
    <component1>in component1</component1>
    <component2>in component2</component2>
</div>

我想獨立於其他項目調用component1，我可以這樣做嗎？ 如果是，那怎么辦？

Answer 1

我了解的是您有2個組件，而您想一次渲染1個組件。 因此最好使用條件渲染，並使用ReactDOM.render()只渲染一個組件

例如

    import React from 'react'
    import ReactDOM from 'react-dom';
    import Component1 from 'somewhere'
    import Component2 from 'somewhere'

    let renderedComponent;

    if (certain condition to meet) {
      renderedComponent = <Component1/>
    } else { 
       renderedComponent = <Component2/>
    }
    ReactDOM.render(renderedComponent, document.getElementById('root'));

其他方式

   // check condition here and assign its value 
   // eg: let renderComponent1 = ( condition to check )
    let renderComponent1 = true 
    let renderComponent2 = false 

 ReactDOM.render(
    <div> 
     {renderedComponent1 && <Component1 />}
     {renderedComponent2 && <Component2 />}
   </div>
, document.getElementById('root'));

這只會渲染<Component1 /> ，如果只想渲染<Component2/>則將renderComponent2設置為true，將renderComponent1為false。

為renderComponent1和renderComponent2變量都設置為true將同時渲染兩個組件，而將false設置為將不渲染任何組件

我希望這是您所需要的。