公开组件

公开组件以允许应用插件轻松地与其他应用插件共享功能。与注册扩展相比，它们不需要扩展提供者针对任何扩展点显式注册组件，因此可以被任何应用插件使用，而无需提供者执行任何操作。

最佳实践

• 使用提供程序包装组件 - 如果您想在组件中访问任何特定于插件的状态，请确保使用必要的 React 上下文提供程序将其包装起来（例如，Redux 的包装）。

从应用插件公开组件

您可以从同一个应用插件中公开一个或多个组件。例如

import pluginJson from './plugin.json';

export const plugin = new AppPlugin()
  // You can also expose multiple components from the same app plugin
  .exposeComponent({
    // Important!
    // The `id` should always be prefixed with your plugin id, otherwise it won't be exposed.
    id: `${pluginJson.id}/reusable-component/v1`,
    title: 'Reusable component',
    description: 'A component that can be reused by other app plugins.',
    component: ({ name }: { name: string }) => <div>Hello {name}!</div>,
  });

在公开的组件中访问插件元信息

您可以访问扩展组件的元数据。例如

import { usePluginContext } from "@grafana/runtime";
import pluginJson from './plugin.json';

export const plugin = new AppPlugin()
  .exposeComponent({
    id: `${pluginJson.id}/reusable-component/v1`,
    title: 'Reusable component',
    description: 'A component that can be reused by other app plugins.',
    component: ({ name }: { name: string }) => {
      // This is the meta information of the app plugin that is exposing the component
      const { meta } = usePluginContext();

      return (
        <div>Hello {name}!</div>
        <div>Version {meta.info.version}</div>
      );
    }
  })