Skip to main content

v4 代码迁移：更新 strapi 全局变量调用

¥v4 code migration: Updating strapi global variable calls

本指南是 v4 代码迁移指南 的一部分，旨在帮助你将 Strapi 应用的代码从 v3.6.x 迁移到 v4.0.x

¥This guide is part of the v4 code migration guide designed to help you migrate the code of a Strapi application from v3.6.x to v4.0.x

🤓 v3/v4 比较

在 Strapi v3 中，window.strapi 全局变量用于显示通知、在请求待处理时冻结用户交互以及获取后端 URL。

¥In Strapi v3, a window.strapi global variable is used to display notifications, freeze user interactions when requests are pending, and get the backend URL.

在 Strapi v4 中，不再支持 strapi.notification、strapi.lockApp 和 strapi.unlockApp，并由特定的 React hook 代替。仍然支持对 strapi.backendUrl 的调用。

¥In Strapi v4, strapi.notification, strapi.lockApp and strapi.unlockApp are not supported anymore and replaced by specific React hooks. Calls to strapi.backendUrl are still supported.

要迁移到 Strapi v4：

¥To migrate to Strapi v4:

  1. 从代码中删除对 strapi.notification、strapi.lockApp 和 strapi.unlockApp 的所有调用。

    ¥Remove all calls to strapi.notification, strapi.lockApp and strapi.unlockApp from the code.

  2. 调整你的代码，使用下表查找与 Strapi v3 功能等效的 Strapi v4 钩子。所有钩子均由 @strapi/helper-plugin 模块提供：

    ¥Adapt your code, using the following table to find Strapi v4 hooks equivalent to Strapi v3 features. All hooks are provided by the @strapi/helper-plugin module:

    v3 中的功能v4 中的等效功能
    strapi.notification 调用useNotification 钩
    strapi.lockApp 调用useOverlayBlocker 钩子中的 lockApp 方法
    strapi.unlockApp 调用useOverlayBlocker 钩子中的 unlockApp 方法
    strapi.backendUrl 调用strapi.backendUrl 调用（仍然存在于 Strapi v4 中）

以下示例应帮助你开始使用 useNotification 钩子和 lockApp/unlockApp 方法：

¥The following examples should help you get started using the useNotification hook and lockApp/unlockApp methods:

Example of using the useNotification hook in Strapi v4:
./src/plugins/<my-plugin>/admin/*.js

import { useNotification } from '@strapi/helper-plugin';
import { Button, Main } from '@strapi/design-system';



const HomePage = () => {


  const toggleNotification = useNotification();

  const handleClick = () => {
    toggleNotification({
        // required
        type: 'info|success|warning', // choose one from the list
        // required
        message: { id: 'notification.version.update.message', defaultMessage: 'A new version is available' },
        // optional
        link: {
          url: 'https://github.com/strapi/strapi/releases/tag/v4',
          label: {
            id: 'notification.version.update.link',
            defaultMessage: 'See more'
          },
        },
        // optional, default = false
        blockTransition: true,
        // optional
        onClose: () => localStorage.setItem('STRAPI_UPDATE_NOTIF', true),
      });
  }

  return (
    <Main>
      <h1>This is the homepage</h1>
      <Button onClick={handleClick}>Display notification</Button>
    </Main>
  );
};
Example of using the lockApp and unlockApp methods in Strapi v4:
./src/plugins/<my-plugin>/admin/*.js

import { useOverlayBlocker } from '@strapi/helper-plugin';



const MyCompo = () => {


const { lockApp, unlockApp } = useOverlayBlocker();

 return null
}
Example of logging the backend URL value in Strapi v4:
./src/plugins/<my-plugin>/*.js



const myHelper = () => {


  console.log(strapi.backendURL); // http://localhost:1337
};

使用 @strapi/helper-plugin 故事书​

¥Using the @strapi/helper-plugin Storybook

Strapi v4 提供的 @strapi/helper-plugin 模块具有 故事书 实例。可以运行 Storybook 实例来显示有关专门针对 Strapi 管理面板的内部组件的更多文档。这包括有关 useNotification 钩子的信息。要访问 @strapi/helper-plugin 附带的文档：

¥The @strapi/helper-plugin module provided with Strapi v4 features a Storybook instance. The Storybook instance can be run to display further documentation about the internal components specifically targeted for the Strapi admin panel. This includes information about the useNotification hook. To access the documentation included with @strapi/helper-plugin:

  1. 克隆 Strapi 存储库：

    ¥Clone the Strapi repository:

    git clone git@github.com:strapi/strapi.git

  2. 安装所有依赖：

    ¥Install all the dependencies:

    cd strapi && yarn setup

  3. 运行 @strapi/helper-plugin Storybook 实例：

    ¥Run the @strapi/helper-plugin Storybook instance:

    cd packages/core/helper-plugin
    yarn storybook
💡 提示

当运行 @strapi/helper-plugin 提供的 Storybook 实例时，可以在 http://localhost:6006/?path=/story/hooks-usenotification--page 找到 useNotification 钩子的文档。

¥When running the Storybook instance provided with the @strapi/helper-plugin, the documentation for the useNotification hook can be found at http://localhost:6006/?path=/story/hooks-usenotification--page.