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

Question

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

我的项目-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。

将 true 设置为 renderComponent1 和 renderComponent2 变量将渲染两个组件，而设置 false 将不会渲染任何组件

希望这就是您所需要的。

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

How to call react particular component present in ReactDOM.render

javascript

reactjs

react-dom