Figma React 插件 PostMessage 未按预期工作答案

【问题标题】：Figma React plugin PostMessage not working as expectedFigma React 插件 PostMessage 未按预期工作
【发布时间】：2020-07-23 04:39:38
【问题描述】：

我正在尝试为 Figma 创建一个插件，到目前为止一切正常。它基于他们在 github 页面上提供的反应示例：https://github.com/figma/plugin-samples/tree/master/react

在这个例子中，我创建了一个按钮，点击它会调用这个函数：

(file: ui.tsx)
    onClick = () => {
        parent.postMessage({pluginMessage: {type: 'GetData'}}, '*');
    };

这是 parent.postMessage 是 figma 提供的一个函数，用于与项目中的另一个文件 code.ts 进行通信。该文件将接收带有 pluginMessage 作为参数的 postMessage，它按预期工作。接收到这个的 code.ts 如下所示：

(file: code.ts)
    figma.ui.onmessage = msg => {
      if (msg.type === 'GetData') {
        figma.ui.postMessage({"title": figma.currentPage.selection[0].name});
      }
    };

此文件接收消息，并在设置 GetData 后进入 if 语句。直到这里，一切都很好。我遇到的问题是 figma.ui.postMessage({})，它应该回调 ui.tsx 中的 onmessage 函数：

(file: ui.tsx)
    onmessage = (selection) => {
        console.log(selection);
    };

根据 Figma 的文档，这个 onmessage 函数应该从 code.ts 中的 postMessage 接收对象。然而，这永远不会发生；它永远不会被调用。我无法访问 ui.tsx 中的当前选择，所以我需要来自 code.ts 的数据。有没有办法将此数据传递给 ui.tsx，或者有谁知道为什么这不起作用？

【问题讨论】：

标签： reactjs typescript plugins figma

【解决方案1】：

我遇到了同样的问题。在您的 ui.tsx 文件中，尝试添加以下内容：

window.onmessage = selection => {
   let message = selection.data.pluginMessage;
   console.log(message);
}

【讨论】：

【解决方案2】：

或者试试这个 ->

window.addEventListener("message", (selection) => {
    console.log(selection);
});

这将向窗口添加另一个消息事件处理程序。如果你使用 onmessage 它可能会覆盖之前的处理程序！

【讨论】：