如何在单个 spfx 解决方案中创建两个 webpart？

Posted 2023-03-27

【中文标题】如何在单个 spfx 解决方案中创建两个 webpart？

【英文标题】：How to create two webparts within a single spfx solution?

【发布时间】：2020-05-27 23:04:38

【问题描述】：

我的最终目标是创建一个 spfx 项目，允许我将两个 Web 部件添加到 SPO 页面。这两个 Web 部件将分别连接到不同的自定义列表。 Webpart (A) 将在项目旁边有一个按钮，如果用户单击该按钮，那么它将根据 Webpart (A) 中项目的 ID 过滤 Webpart (B)。 我已经创建了一个 spfx 项目。它目前有一个.ts 文件，其中包含项目的“入口点”。 这允许我将该 web 部件添加到 SPO 页面。如上所述，我希望能够为 SPO 页面创建两个不同的 webpart。 问题：我会创建两个“入口点”.ts 文件吗？或者这不是必需的吗？ 如果没有必要，我该怎么做呢？

除此之外是否有任何示例代码 - https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-events-dynamicdata

以下是我所指的一些入口点代码供您参考：

...
export default class ConnectedWebpartsWebPart extends BaseClientSideWebPart <IConnectedWebpartsWebPartProps> 
  public onInit(): Promise<void> 
    return super.onInit().then(_ => 
      // other init code may be present
      pnpSetup(
        spfxContext: this.context
      );
    );
  
...

汤姆

【参考方案1】：

这很简单 - 只需使用 Yeoman 并在现有项目的文件夹中运行另一个 yo @microsoft/sharepoint。 现在尝试让这 2 个 webpart 连接起来……这是个棘手的问题。