Ошибка при подключении SPFx к контексту sharepoint

#sharepoint #spfx

#sharepoint #spfx

Вопрос:

Я следую инструкциям на сайте MS https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint

однако на шаге, который позволил бы SPFx получить текущий контекст страницы, я заблокирован ошибкой, это мой код на HelloWorld.tsx

 return (
      <div className={ styles.helloWorld }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <p className={ styles.description }>{this.props.test2}</p>
              <p className={ styles.description }>{escape(this.context.pageContext.web.title)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
 

ошибка this.context

Ответ №1:

В IWebPartNameProp.ts добавьте контекст следующим образом:

 import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface IJerryTestWpProps {
  description: string;
  context:WebPartContext;
}
 

В WebPartNameWebPart.ts добавьте контекст следующим образом:

   public render(): void {
    const element: React.ReactElement<IJerryTestWpProps> = React.createElement(
      JerryTestWp,
      {
        description: this.properties.description,
        context:this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }
 

В WebPartName.tsx получите веб-заголовок из контекста следующим образом:

 <p className={ styles.description }>{escape(this.props.context.pageContext.web.title)}</p>
 

Ссылка:

Как получить PageContext в SPFx?