如何使用 spfx 中的动态数据将数据从一个 Web 部件发送到另一个 Web 部件

Question

我在一个项目中有两个 Web 部件，我正在尝试将值发送到另一个 Web 部件。我浏览了 microsoft sharepoint 中关于动态数据的文档。但是我几乎什么也得不到。

一个 web 部件将进行过滤，另一个 web 部件将显示过滤后的内容results.I 只是想知道传递值以便在第二个 web 部件中进行过滤。

任何建议都会有所帮助

Answer 1

Connect SharePoint Framework components using dynamic data

示例测试演示：

SourceWebPart:

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import { IDynamicDataCallables, IDynamicDataPropertyDefinition } from '@microsoft/sp-dynamic-data';
import styles from './SourceWebPartWebPart.module.scss';
import * as strings from 'SourceWebPartWebPartStrings';

export interface IPoint { 
  x: number;
  y: number;
}

export interface ISourceWebPartWebPartProps {
  description: string;
}

export default class SourceWebPartWebPart extends BaseClientSideWebPart<ISourceWebPartWebPartProps> implements IDynamicDataCallables{
  protected onInit(): Promise<void> {

    this.context.dynamicDataSourceManager.initializeSource(this);

    return Promise.resolve();
  }
  public getPropertyDefinitions(): ReadonlyArray<IDynamicDataPropertyDefinition> {
    return [
      {
        id: 'x',
        title: 'Mouse-X'
      },
      {
        id: 'y',
        title: 'Mouse-y'
      }
    ];
  } 
  public getPropertyValue(propertyId: string): number {
    switch (propertyId) {
      case 'x':
        return this.mousePosition.x;
      case 'y':
        return this.mousePosition.y;
    }

    throw new Error('Bad property id');
  }
  private mousePosition: IPoint;  

  public onMouseClick(e) {  
    this.mousePosition = { x: e.clientX, y: e.clientY };
    this.context.dynamicDataSourceManager.notifyPropertyChanged('x');
    this.context.dynamicDataSourceManager.notifyPropertyChanged('y');
  }

  public render(): void {
    this.domElement.innerHTML = `
    <div id="webpartdiv" style="width: 700px; height: 200px; background-color: yellow">

    </div>`;


  this.domElement.onclick=this.onMouseClick.bind(this);

  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

TargetWebPart:

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  IWebPartPropertiesMetadata,
  IPropertyPaneConditionalGroup,
  DynamicDataSharedDepth,
  PropertyPaneDynamicFieldSet,
  PropertyPaneDynamicField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './TargetWebPartWebPart.module.scss';
import * as strings from 'TargetWebPartWebPartStrings';

import { DynamicProperty } from '@microsoft/sp-component-base';

export interface ITargetWebpartWebPartProps {
  description: string;
  x: DynamicProperty<number>;
  y: DynamicProperty<number>;
}

export default class TargetWebpartWebPart extends BaseClientSideWebPart<ITargetWebpartWebPartProps> {

  public render(): void {

    const x: number | undefined = this.properties.x.tryGetValue();
    const y: number | undefined = this.properties.y.tryGetValue();
    console.log(x);
    this.domElement.innerHTML = `
      <div class="${ styles.targetWebPart }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">TargetWebpart</span>                 
                <div>Mouse X: ${ x == undefined ? '0' : x }</div>
                <div>Mouse Y: ${ y == undefined ? '0' : y }</div>
            </div>
          </div>
        </div>
      </div>`;
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected get propertiesMetadata(): IWebPartPropertiesMetadata {
    return {
      'x': {
        dynamicPropertyType: 'number'
      },
      'y': {
        dynamicPropertyType: 'number'
      }
    };
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          groups: [
            {
              groupFields: [
                PropertyPaneDynamicFieldSet({
                  label: 'Select data source',
                  fields: [
                    PropertyPaneDynamicField('x', {
                      label: 'Position x'
                    })
                  ]
                }),
                PropertyPaneDynamicFieldSet({
                  label: 'Select data source',
                  fields: [
                    PropertyPaneDynamicField('y', {
                      label: 'Position y'
                    })
                  ]
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

或

Sharing data between SPFx web parts

如何使用 spfx 中的动态数据将数据从一个 Web 部件发送到另一个 Web 部件

How to send data from one webpart to another webpart using dynamic data in spfx

sharepoint

reactjs

sharepoint-online

spfx