TypeScript react-dom.unmountComponentAtNode函數代碼示例

 @override
 public onDisposeCell(event: IFieldCustomizerCellEventParameters): void {
   // This method should be used to free any resources that were allocated during rendering.
   // For example, if your onRenderCell() called ReactDOM.render(), then you should
   // call ReactDOM.unmountComponentAtNode() here.
   ReactDOM.unmountComponentAtNode(event.cellDiv);
   super.onDisposeCell(event);
 }

export function removeLastTemplate() {
  if (_lastTemplateDiv) {
    ReactDOM.unmountComponentAtNode(_lastTemplateDiv);
    if (_lastTemplateDiv.parentElement) {
      _lastTemplateDiv.parentElement.removeChild(_lastTemplateDiv);
    }
    _lastTemplateDiv = null;
  }
}

    childWindow.onbeforeunload = () => {
      if (popoutContainer) {
        ReactDOM.unmountComponentAtNode(popoutContainer)
      }

      if (_.isFunction(options.onClosing)) {
        options.onClosing()
      }
    }

 scope.$on('$destroy', () => {
   if (!attrs.onScopeDestroy) {
     ReactDOM.unmountComponentAtNode(elem[0]);
   } else {
     scope.$eval(attrs.onScopeDestroy, {
       unmountComponent: ReactDOM.unmountComponentAtNode.bind(this, elem[0]),
     });
   }
 });

  onPanelTeardown() {
    this.thresholdManager = null;
    this.timeRegionManager = null;

    if (this.plot) {
      this.plot.destroy();
      this.plot = null;
    }

    this.tooltip.destroy();
    this.elem.off();
    this.elem.remove();

    ReactDOM.unmountComponentAtNode(this.legendElem);
  }

  onRender(renderData) {
    this.data = renderData || this.data;
    if (!this.data) {
      return;
    }

    this.annotations = this.ctrl.annotations || [];
    this.buildFlotPairs(this.data);
    const graphHeight = this.elem.height();
    updateLegendValues(this.data, this.panel, graphHeight);

    if (!this.panel.legend.show) {
      if (this.legendElem.hasChildNodes()) {
        ReactDOM.unmountComponentAtNode(this.legendElem);
      }
      this.renderPanel();
      return;
    }

    const { values, min, max, avg, current, total } = this.panel.legend;
    const { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero } = this.panel.legend;
    const legendOptions = { alignAsTable, rightSide, sideWidth, sort, sortDesc, hideEmpty, hideZero };
    const valueOptions = { values, min, max, avg, current, total };
    const legendProps: GraphLegendProps = {
      seriesList: this.data,
      hiddenSeries: this.ctrl.hiddenSeries,
      ...legendOptions,
      ...valueOptions,
      onToggleSeries: this.ctrl.onToggleSeries,
      onToggleSort: this.ctrl.onToggleSort,
      onColorChange: this.ctrl.onColorChange,
      onToggleAxis: this.ctrl.onToggleAxis,
    };

    const legendReactElem = React.createElement(LegendWithThemeProvider, legendProps);
    ReactDOM.render(legendReactElem, this.legendElem, () => this.renderPanel());
  }

 unmountElement() {
   ReactDOM.unmountComponentAtNode(this.getRootElement());
 }

 public unmount() {
     ReactDOM.unmountComponentAtNode(this.container);
 }

 params.api.addVirtualRowListener('virtualRowRemoved', params.rowIndex, () => {
     ReactDOM.unmountComponentAtNode(eCell);
 });

export function removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement): Promise<any> {
  ReactDOM.unmountComponentAtNode(childElement);
  parentElement.removeChild(childElement);
  return Promise.resolve();
}