将WebPart PropertyPane传递给React组件

Question

我有一个webpart和一个react组件。在组件中，我获取一个SharePoint列表。然后，我将该列表传递给wepbart。

在Webpart的PropertyPane中，用户可以添加或删除项目。然后，我想将该新列表传递给react组件。

在Webpart中，我创建了组件：

public render(): void {    
    const element: React.ReactElement<IDeliveryBoardTruckScheduleProps> = React.createElement(
      DeliveryBoardTruckSchedule,
        **updateLocations: (locations: ILocation[]) => {    
          console.log("updating locations and collectionData | locations: ", locations);      
          this.properties.collectionData = locations;
        },**
        openLocations:() => {
          this.context.propertyPane.open();
        },
        location: this.properties.location,
        collectionData: this.properties.collectionData,
        selectedCity: this.properties.selectedCity,
      },
    );

    ReactDom.render(element, this.domElement);
}

我使用updateLocations将共享点列表传递到Webpart。

我还请求Webpart使用“ openLocatins”打开属性窗格

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    let groupOptions: IPropertyPaneChoiceGroupOption[] = [];

    this.properties.collectionData.map(function(item){
        groupOptions.push({
            key: item.Title,
            text: item.Title
        });
    });

    return {
        pages: [
            {
                header: {
                    description: strings.PropertyPaneDescription
                },
                groups: [
                    {
                        groupName: strings.BasicGroupName,
                        groupFields: [
                            PropertyPaneChoiceGroup("selectedCity", {
                                label:"Cities",
                                options: groupOptions,
                            }),
                            PropertyFieldCollectionData("collectionData", {
                                key: "collectionData",
                                label: "Branch Locations",
                                panelHeader: "Collection data panel header",
                                manageBtnLabel: "Add Branch Location",
                                value: this.properties.collectionData,
                                fields: [
                                    {
                                        id: "Title",
                                        title: "City",
                                        type: CustomCollectionFieldType.string,
                                        required: true
                                    },
                                    {
                                        id: "Abbreviation",
                                        title: "3 Letter City Abbreviation",
                                        type: CustomCollectionFieldType.string,
                                        required: true,
                                    },
                                ],
                                disabled: false
                            })
                        ]
                    }
                ]
            }
        ]
    };
}

如果有任何更改，我将设置webparts属性：

protected onPropertyPaneFieldChanged() {
        for (let locationInCollection of this.properties.collectionData) {

            if (this.properties.selectedCity === locationInCollection.Title) {
                this.properties.location = locationInCollection;
            }
        }
}

在组件中，我使用componentDidUpdate来处理更改：

public componentDidUpdate(prevProps): void {
    console.log("componentDidUpdate | prevProps.collectionData: ", prevProps.collectionData);
    console.log("componentDidUpdate | this.props.collectionData: ", this.props.collectionData);


    if ((this.props.collectionData !== prevProps.collectionData)) {
        // handle adding and removing items

        Promise.all([this._createLocations(addLocations), this._deleteLocations(deleteLocations)])
            .then((result) => {
                console.log("componentDidUpdate | all promises done: ", result);

                this._loadLists();
            });

    }
    else {
        console.log("componentDidUpdate | props are the same, not doing anything");
    }
}

在_loadLists（）中，我重新获取共享点列表，然后再次调用updateLocations。

这有点奏效。第一次加载WebPart应用程序时出现问题，并且列表中已经有项目。 collectionData不能及时更新：

componentDidMount | fired
Component.tsx:137 loadList | fired
Component.tsx:794 _fetchLocationsNew | newLocations:  (3) [{…}, {…}, {…}]
WebPart.ts:54 updating locations and collectionData | locations:  (3) [{…}, {…}, {…}]
WebPart.ts:57 updating locations and collectionData | this.properties.collectionData:  (3) [{…}, {…}, {…}]
Component.tsx:798 _fetchLocationsNew | this.props.collectionData:  undefined
Component.tsx:155 componentDidUpdate | fired
Component.tsx:157 componentDidUpdate | prevProps.collectionData:  undefined
Component.tsx:158 componentDidUpdate | this.props.collectionData:  undefined
Component.tsx:163 state and prop are not the same
Component.tsx:227 componentDidUpdate | props are the same, not doing anything

我获取列表，将其传递给它，设置Webpart的属性，但是返回到react组件的componentDidUpdate中，collectionData是未定义的。

这导致了问题。

是否有更好的方法将信息从Web部件传递到react组件？

我可以传递不需要使用Webpart属性的东西吗？