SPfx 连接到共享点上下文时出错

Error on SPfx connecting to sharepoint context

我正在按照 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>
    );

在 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>

参考:

How to retrieve pageContext in SPFx?