如何调用ReactDOM.render中存在的特定组件

时间:2018-12-25 10:22:43

标签: javascript reactjs react-dom

我要在myProject-init.js的单个div中呈现2个组件,一次呈现1个。但是两者都被称为并行。

myProject-init.js文件:

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

我想独立于其他项目调用component1,我可以这样做吗?如果是,那怎么办?

1 个答案:

答案 0 :(得分:0)

我了解的是您有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。

true设置为renderComponent1renderComponent2变量将同时渲染组件,而设置false将不渲染任何组件

我希望这是您所需要的。