Как использовать pageContext в SPFx? - PullRequest
Новая
       27

Как использовать pageContext в SPFx?

0 голосов
/ 02 марта 2019

Я пытаюсь получить значение с текущей страницы, используя pageContext, но я получаю либо undefined, либо 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>
    );
  }
}

С уважением, Amerco

1 Ответ

0 голосов
/ 14 марта 2019

Что вы, вероятно, захотите сделать, это сохранить ваши теги в состоянии вашего компонента.Затем вы можете показать их (если значение из состояния не пусто) во время рендеринга.Я настоятельно рекомендую пройти курс обучения по React, чтобы понять жизненный цикл React и состояние / реквизиты.

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

...