Question

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

请考虑到第一页仅包含主要数据，并且当用户从详细信息列表中的任何行单击第一列链接时，我需要打开第二页以及所有其他详细信息。

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

您是否曾经做过类似的事情。
什么是最好的方法？
真的有可能通过链接传递查询字符串吗？

下面是我的第一页详细信息列表配置。

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

此处的本地页面链接仅用于测试，您应将其更改为详细信息页面链接。

儿童/详细信息页面

在我的详细信息页面上的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 Detail列表连接不同页面中的两个Web部件

1 个答案: