暴露组件

将组件暴露出来，以便应用程序插件可以轻松地与其他应用程序插件共享功能。与注册扩展相比，它们不需要扩展提供者显式地将组件注册到任何扩展点上，因此可以被任何应用程序插件使用，无需提供者采取任何行动。

最佳实践

• 使用提供者包裹您的组件 - 如果您想在组件中访问任何插件特定状态，请确保使用必要的 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>
      );
    }
  })