Question

我们有以下情况：

1. Parent component has child components.
==============================================================
      <ContainerComponent>
         <Layout> 
            <CustomComponent>
               <ActualComponent>
            <CustomComponent>
               <ActualComponent>
==============================================================

这样就可以进行组件安装，并根据任务渲染每个ContainerComponent。

组件容器包含：

     return (
        <div className='row' >
          <div className='col-md-12' >
            <div className="ic-component" id="MainComponent"  >
              <div style={{'border':'5px;solid #e0e7f0'}}>
                <div id="rootwizard3" className='wizard'>
                  <ul>
                    {TabHeader}
                  </ul>

                  <div className="tab-content" id="tabcontent" >

                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      );

然后ContainerComponent包含Layout组件：

   $("#tabcontent").empty();
    if(LayOut===null)
    { 
    }
    else {
      React.render(
        <div  id={tabid}><div  id={layoutid}>
          <LayOut CurrentStepId={CurrentStepId} TaskDetails={TaskDetails}  IsActualComponent="true"/>
        </div>
      </div>,document.getElementById('tabcontent'));
    }
  },

布局组件包含CustomComponent：

    var findDiv1=$("div > #"+TabbId+" > div > div > div > div > div")[0];
      $(findDiv1).empty();
    var valueP3=1;
      React.render(<CustomComponent inputType={Set} ItemName=""  ItemId=""  KeyValue={valueP3} addbtndispaly="" editbtndispaly="" deletebtndispaly="" Views="" />,findDiv1);

卸载Container页面：

  React.unmountComponentAtNode(document.getElementById('tabcontent'));

以下方式安装组件。

初始组件安装。这里布局组件加载到Container Component中。但自定义组件未在布局下显示？但输出正在显示出来。 chrome react tool component loading structure
第二次安装组件，但此处只删除＆＃34; ctab137＆＃34;下的组件。不卸载自定义组件。第二版cutom组件被创建。

chrome react tool component loading structure-Second time loading
1. 当我们去任务（功能）时，它会安装父组件并相应地相应的子组件已安装。
2. 当我们点击另一个任务时，表示containerComponent，然后只调用containerComponent unmount。为此我们正在清除其子组件安装的容器组件div。并加载另一个任务子组件。

但是，如果我们在每次安装子组件时，如果该组件已经存在，我们将面临问题。这会产生问题。以上是上面提到的自定义组件没有得到合适的卸载。每次创建单独的customComponent副本时，以及执行该功能的时间。

此处还有子组件componentWillUnmount无法调用。

我想知道以下问题的答案。

如果没有卸载子组件，如何卸载子组件？
如果没有调用子组件unmount方法，如何调用它？
有没有办法按组件名称卸载组件？

React js：组件未正确卸载

0 个答案: