如何在 SPFx 中使用 pageContext？答案

【问题标题】：How to use the pageContext in SPFx?如何在 SPFx 中使用 pageContext？
【发布时间】：2019-03-02 18:18:59
【问题描述】：

我正在尝试使用 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);
});

但它让我无法读取未定义的属性“列表”

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

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

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

问候美国公司

【问题讨论】：

标签： spfx pagecontext

【解决方案1】：

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

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

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

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

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

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

【讨论】：