代码之家 › 专栏 › 技术社区 › Sibeesh Venu

从UI Fabric React Detail list连接不同页面中的两个web部件

office-fabric office-ui-fabric sharepoint-online sharepoint reactjs

-2

Sibeesh Venu · 技术社区 · 6 年前

考虑到第一个页面只包含主数据,当用户单击detaillist中任何行的第一列链接时,我需要打开第二个页面,其中包含所有其他详细信息。

但要做到这一点,我希望第二页中可以提供一些数据,以便查询和获取所需的数据。

你做过类似的事情吗。
最好的方法是什么?
真的可以从链接传递查询字符串吗?

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

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

1 回复 | 直到 6 年前

1

0

Sibeesh Venu 6 年前

我想我已经做到了。以下是我正在做的事情。下面是我的组件,我在父页。

主页面组件

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部件的typescript文件。我已经进口了 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来获取所需的数据并设计我的页面。