连接 UI Fabric React 详细列表中不同页面中的两个 Web 部件

Question

我是 SharePoint 的新手。我的一个页面中有一个 SharePoint UI Fabric 反应详细信息列表，我正在创建一个包含其他 Web 部件的不同页面。

考虑到第一页仅包含主要数据，当用户单击详细信息列表中任意行的第一列 link 时，我需要打开包含所有其他详细信息的第二页。

但为此，我希望在第二页中提供一些数据，以便我可以查询和获取所需的数据。

你有没有做过类似的事情。
执行此操作的最佳方法是什么？
是否真的可以从 link 传递查询字符串？

下面是我的首页详情列表配置。

export class ResultList extends React.Component<IResultListProps, {}> {
    constructor(props: IResultListProps) {
        super(props);
    }

    public render(): React.ReactElement<IResultListProps> {
        return (
            <DetailsList items={this.props.items} columns={this.getColumns()} />
        );
    }

    private getColumns(): IColumn[] {
        return [
            {
                key: 'name',
                name: 'name',
                fieldName: 'name',
                minWidth: 100,
                maxWidth: 120,
                isResizable: true,
                onRender: (item) => <a target="_blank" href="a link to the second page">{item.name}</a>
            }
        ];
    }
}

Answer 1

我想我做到了。这是我正在做的事情。下面是我在父页面中的组件。

主页组件

import * as React from 'react';
import { DetailsList, IColumn, Link, Fabric } from 'office-ui-fabric-react';
import { IResultListProps } from './IResultListProps';

export class ResultList extends React.Component<IResultListProps, {}> {
    constructor(props: IResultListProps) {
        super(props);
    }

    public render(): React.ReactElement<IResultListProps> {
        return (
            <DetailsList items={this.props.items} columns={this.getColumns()} />
        );
    }

    private getColumns(): IColumn[] {
        return [
            {
                key: 'name',
                name: 'name',
                fieldName: 'name',
                minWidth: 100,
                maxWidth: 120,
                isResizable: true,onRender: (item) => <a target="_blank" href={`https://localhost:4321/temp/workbench.html?selectedName=${item.name}`}>{item.name}</a>
            }
        ];
    }
}

此处的本地页面 link 仅用于测试，您应该将其更改为详细页面 link。

Child/Detail 页面

并且在我的详细信息页面上 Web 部件打字稿文件。我导入了 UrlQueryParameterCollection

import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';

在 onInit 中，我得到的值如下。

protected onInit(): Promise<void> {
    return super.onInit().then(() => {
      let queryParameters = new UrlQueryParameterCollection(window.location.href);
      let name = queryParameters.getValue("name");
      alert(name);
    })
  }

从这里我可以开始编写 API 来获取所需的数据并设计我的页面。

希望对您有所帮助。

连接 UI Fabric React 详细列表中不同页面中的两个 Web 部件

Connect two web parts in different pages from UI Fabric React Detail list

sharepoint

reactjs

sharepoint-online

office-ui-fabric

office-fabric