如何在 SPFx 中使用 pageContext？

Question

我正在尝试使用 pageContext 从当前页面获取值，但我得到的不是未定义就是 404。是这样的情况：在网站页面库中有几个新闻页面。每个新闻页面都附有一些标签。此标记位于站点页面库中的自定义列中。有新闻有 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);
});

但它给我无法读取属性 'list' of undefined

你知道如何获取与当前新闻相关的标签列的值吗？

这是更新 现在我得到了正确的标签。现在的问题是如何在屏幕上显示出来？

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>
    );
  }
}

问候美国

Answer 1

您可能想要做的是将标签存储在组件的状态中。然后您可以在渲染期间显示这些（如果状态的值不为空）。我强烈建议您通过 React 教程来了解 React 生命周期和 state/props。

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

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

在 componentDidMount 中获取数据，使用 this.setState 将其存储在状态中，然后运行通过它们 this.state.tags 进行渲染。它更像是一个 React 问题，然后是一个 SPFx 问题 :)

这里有大量使用 SPFx 和 React 的示例：

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

如何在 SPFx 中使用 pageContext？

How to use the pageContext in SPFx?

pagecontext

spfx