我要在myProject-init.js的单个div中呈现2个组件,一次呈现1个。但是两者都被称为并行。
myProject-init.js文件:
ReactDOM.render(
<div>
<component1>in component1</component1>
<component2>in component2</component2>
</div>
我想独立于其他项目调用component1,我可以这样做吗?如果是,那怎么办?
答案 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
设置为renderComponent1
和renderComponent2
变量将同时渲染组件,而设置false
将不渲染任何组件
我希望这是您所需要的。