Skip to main content

如何在插件中重用内置的管理面板组件

🌐 How to reuse built-in admin panel components in plugins

Page summary:

内置的管理面板组件通过组件注册表暴露，你可以使用 useStrapiApp 钩子读取它们。本指南以媒体库对话框（MediaLibraryDialog）为例：从注册表中访问它，然后将其渲染以重用 Strapi 的资源选择对话框，可选地使用 initiallySelectedAssets 属性预先选择资源。

当开发 Strapi 插件或自定义管理面板时，你可能想重用 Strapi 已经在其管理面板中提供的 React 组件，而不是自己构建。内置组件通过管理面板的组件注册表提供，你可以使用 useStrapiApp 钩子访问它们。

🌐 When developing a Strapi plugin or customizing the admin panel, you might want to reuse a React component that Strapi already ships in its admin panel instead of building your own. Built-in components are exposed through the admin panel's component registry, which you access with the useStrapiApp hook.

本指南以媒体库对话框（MediaLibraryDialog）为例，但同样的方法适用于在管理面板中注册的任何组件。

🌐 This guide uses the Media Library dialog (MediaLibraryDialog) as an example, but the same approach works for any component registered in the admin panel.

从注册表访问组件​

🌐 Access a component from the registry

内置的管理面板组件存储在 Strapi 应用上下文的 components 对象中。使用 useStrapiApp 钩子读取它，传入使用组件的名称和选择器：

🌐 Built-in admin panel components are stored in the components object of the Strapi app context. Read it with the useStrapiApp hook, passing the name of the consuming component and a selector:

import { useStrapiApp } from '@strapi/admin/strapi-admin';

const components = useStrapiApp('MyCustomComponent', (state) => state.components);
const MediaLibraryDialog = components['media-library'];

useStrapiApp 的第一个参数是标识消费者的标签（用于错误信息）；第二个是返回你所需上下文部分的选择器。

🌐 The first argument to useStrapiApp is a label identifying the consumer (used for error messages); the second is the selector that returns the part of the context you need.

重用媒体库对话框​

🌐 Reuse the Media Library dialog

MediaLibraryDialog 组件会打开整个管理面板中使用的相同资源选择对话框。它接受以下属性:

🌐 The MediaLibraryDialog component opens the same asset-selection dialog used across the admin panel. It accepts the following props:

属性类型描述
onSelectAssets(selectedAssets: File[]) => void必填。当用户确认选择时调用，并传入用户选择的资源。
onClose() => void必填。当对话框关闭时调用。
initiallySelectedAssetsFile[]可选。对话框打开时预先选中的媒体库资源对象。
allowedTypesstring[]可选。限制可选择的资源类型。默认值为 ['files', 'images', 'videos', 'audios']。
multipleboolean可选。允许一次选择多个资源。默认值为 true。
Note

initiallySelectedAssets 期望完整的媒体库资源对象（与 Upload API 返回的形状相同），而不仅仅是 id 和 name。

以下示例渲染来自自定义组件的对话框，并在打开时预先选择资源：

🌐 The following example renders the dialog from a custom component and pre-selects assets when it opens:

import { useState } from 'react';
import { useStrapiApp } from '@strapi/admin/strapi-admin';

export function MyCustomComponent() {
  const [isMediaLibraryOpen, setIsMediaLibraryOpen] = useState(false);
  const components = useStrapiApp('MyCustomComponent', (state) => state.components);
  const MediaLibraryDialog = components['media-library'];

  // Assets to pre-select when the dialog opens.
  // Each entry is a full Media Library asset object, not just an id and name.
  const initialAssets = [
    { id: 1, name: 'image1.jpg' /* ...other asset fields */ },
    { id: 2, name: 'image2.png' /* ...other asset fields */ },
  ];

  const handleSelectAssets = (assets) => {
    // Handle the assets the user selected
    console.log('Selected assets:', assets);
    setIsMediaLibraryOpen(false);
  };

  return (
    <>
      <button type="button" onClick={() => setIsMediaLibraryOpen(true)}>
        Open the Media Library
      </button>
      {isMediaLibraryOpen && (
        <MediaLibraryDialog
          initiallySelectedAssets={initialAssets}
          onSelectAssets={handleSelectAssets}
          onClose={() => setIsMediaLibraryOpen(false)}
        />
      )}
    </>
  );
}

预先选择资源可以确保当用户从你的自定义组件打开媒体库对话框时，之前选择的项目会显示出来。

🌐 Pre-selecting assets ensures that previously selected items are displayed when users open the Media Library dialog from your custom component.

On this page