如何在SPFx中使用pageContext？

Question

我試圖通過使用pageContext從當前頁面獲取值，但是我得到的是undefined或4​​04。這種情況：在Site pages庫中有幾個新聞頁面。 每個新聞頁面都有一些附加的標簽。 此標記位於“網站頁面”庫中的自定義列中。 有具有1個標簽和其他幾個標簽的新聞。 可能是兩個或更多新聞共享相同標簽的情況。 目的是當我打開新聞頁面時，附加到該新聞的標簽也可見。

到目前為止，我使用@ pnp / pnpjs，代碼看起來像這樣：

var result: any = await sp.web.lists.getByTitle("Site Pages")
  .items.getById(15)
  .select("Tags")
  .get();

return await result.Tags;

它給我404錯誤

我也嘗試過這個：

this.context.pageContext.list('Site Pages').listItem['Tags'].get().then((items: any[]) => {
  console.log(items);
});

但是它給我無法讀取未定義的屬性“列表”

杜，您有一個想法如何獲取與當前新聞相關聯的“標簽”列的值？

這是一個更新現在我得到了正確的標簽。 現在的問題是如何在屏幕上顯示它？

import * as React from 'react';
import styles from './ReadTags.module.scss';
import { IReadTagsProps } from './IReadTagsProps';
import { sp } from '@pnp/pnpjs';

export default class ReadTags extends React.Component<IReadTagsProps, {}> {
  constructor(props: IReadTagsProps) {
    super(props);

  }

  private async getTags() {
      var id = this.props.context.pageContext.listItem.id;
      var result: any = await sp.web.lists.getByTitle("Site Pages")
        .items.getById(id)
        .select("Tags")
        .get();

      return await result.Tags;
  }

  public render(): React.ReactElement<IReadTagsProps> {
    console.log(this.getTags());
    return (
      <div className={ styles.readTags }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

問候Amerco

Answer 1

您可能要做的就是將標簽存儲在組件的狀態下。 然后，您可以在渲染過程中顯示這些（如果state的值不為空）。 我強烈建議您閱讀React教程，以了解React的生命周期和狀態/屬性。

https://reactjs.org/tutorial/tutorial.html

https://reactjs.org/docs/state-and-lifecycle.html

將數據保存在componentDidMount中，使用this.setState將數據存儲在狀態中，然后使用this.state.tags在render中運行它們。 與其說是SPFx問題，不如說是一個React問題：)

這里有大量的帶有SPFx和React的示例：

https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples