reactjs - 如何在 vscode webview 中使用acquireVsCodeApi [React]

Question

我正在尝试基于 Webview 为 vscode 开发一个新的扩展但我遇到了从客户端向扩展发布消息的问题。作为初学者，我使用了 this repo我正在关注这些 steps from Microsoft .
正如您在示例中看到的，我们有:

(function() {
            const vscode = acquireVsCodeApi();

我的问题是在我的 react 应用程序中 acquireVsCodeApi就像它不存在一样。我尝试了多种方法，例如。在 componentDidMount生命周期，但没有运气。
This user似乎能够运行它，但他的应用程序的一部分丢失了，所以我不清楚。
有没有人知道如何使用 acquireVsCodeApi()使用 React 或可以提供帮助的代码片段？
问候

Answer 1

好的，首先您需要将它分配给脚本中 webview 内容中的一个变量，例如:
https://github.com/shinhwagk/vscode-note/blob/be2aabf2812a9b6200be971425535024440dbd88/src/panel/notesPanelView.ts#L32

然后在 typescript 中，它必须是一个界面

interface vscode {
    postMessage(message: any): void;
}

declare const vscode: vscode;

const addCategory = () => () => vscode.postMessage({ command: 'add-category' });

解决方案来自这里: https://github.com/shinhwagk/vscode-note/blob/be2aabf2812a9b6200be971425535024440dbd88/src/webview/index.tsx#L10