0

I have a component that is looking at the web + page context to generate a new breadcrumb. This works well except that it keeps re-adding the entire component after each page navigatedEvent. I've forced a dispose, but that just causes it to flicker in and out which isn't what I want. Do I need to pass the context.application object down the chain so I can attach an event further down the line? How do I go about doing this?

My code looks like this:

public async onInit(): Promise<void> {
  setSPConfig(this.context);
  this.context.application.navigatedEvent.add(this, this._renderPlaceHoldersNav);
  this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);

  Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);    

  this._renderPlaceHolders()
  return Promise.resolve();
}
private async _renderPlaceHoldersNav() : Promise<void> {
  const sp = getLocalSPConfig(this.context);

  this._topPlaceholder?.dispose();
  this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
    PlaceholderName.Top,
    { onDispose: this._onDispose }        
  );
  if(this._topPlaceholder) {
    const mainComponent : React.ReactElement<IMainComponentProps> = React.createElement(
    MainComponent, { 
      sp: sp
    });
  ReactDom.render([mainComponent], this._topPlaceholder.domElement);
 }
}
private async _renderPlaceHolders(): Promise<void> {    
   const sp = pnpjsConfig.getLocalSPConfig(this.context);


   if (!this._topPlaceholder) {
     this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
       PlaceholderName.Top,
       { onDispose: this._onDispose }        
     );
  
    window.addEventListener('beforeunload', (_e) => {
      if(this._topPlaceholder != undefined){
        this._topPlaceholder.dispose();
      }
    });      

  // The extension should not assume that the expected placeholder is available.
  if (!this._topPlaceholder) {        
    console.error("The expected placeholder (Top) was not found.");
    return;
  }
  if (this.properties) {          
    const mainComponent : React.ReactElement<IMainComponentProps> = React.createElement(
      MainComponent, { 
        sp: sp
      });
    ReactDom.render([mainComponent], this._topPlaceholder.domElement);
  }
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.