ExtensionInspector 允许扩展 UI 把一部分 React 内容渲染到 Studio 的检查器面板。它仍属于原来的 React 树，因此可以直接读取组件的 state、context 和 hooks，并随扩展 UI 的选择状态动态更新。 这适合列表、画布或自定义编辑器：主区域负责选择对象，右侧检查器只显示当前对象的属性。相比把所有表单固定堆在扩展页面里，动态检查器能让编辑空间和属性编辑保持分离。

​
基本用法

从 @avg-studio/sdk 导入 ExtensionInspector，把要显示在检查器中的内容作为子节点： 
import { ExtensionInspector } from "@avg-studio/sdk";
import { useState } from "react";

export function ItemEditor() {
  const [selected, setSelected] = useState<Item | null>(null);

  return (
    <>
      <ItemList selected={selected} onSelect={setSelected} />

      <ExtensionInspector>
        {selected ? (
          <ItemInspector item={selected} />
        ) : (
          <p>请先选择一个项目</p>
        )}
      </ExtensionInspector>
    </>
  );
}
selected 变化时，检查器内容会一起更新。子组件也可以直接使用原树中的 context，不需要额外复制状态或建立消息通道。

​
运行环境

Studio 在支持动态检查器的扩展预览中提供挂载点。玩家端等没有检查器面板的运行环境会安全地忽略 ExtensionInspector 中的内容，不会额外显示，也不会因此中断扩展 UI。 因此，不要把游戏运行所必需的逻辑只放在检查器子树里。检查器应当用于编辑器控件和说明；运行时状态仍由扩展主组件或独立逻辑管理。

​
设计建议

  • 没有选中对象时显示简短空状态，不要留下一块无法解释的空白；
  • 检查器宽度有限，优先使用单列字段和可换行说明；
  • 保持修改可撤销、可预览，并为删除等高风险操作增加确认；
  • 只渲染当前选择所需的字段，避免在每次状态变化时重建大型列表；
  • 需要固定项目设置时继续使用设置 Schema，动态检查器更适合随选中对象变化的编辑属性。
如果扩展 UI 还需要由剧本打开、更新或关闭，请结合程序控制可视化界面设计运行时接口；动态检查器只负责 Studio 编辑阶段的属性区域。