Metabase Embedding SDK 的 StaticQuestion 组件 Props 完全指南静态嵌入问答组件的 17 个配置项详解【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase导读StaticQuestion是 Metabase Embedding SDK 中用于**静态嵌入Static Embedding / Guest Embed**场景的核心 React 组件它允许你在宿主应用中渲染一个只读、可交互的问答Question视图支持传入问题 ID、JWT Token、反序列化卡片或查询对象四种数据源并可精细控制标题、尺寸、SQL 参数与下载/告警等能力。本文以官方 API 文档的 Props 表格为骨架结合仓库内StaticQuestion组件的真实实现与类型定义逐一拆解全部 17 个配置项的语义、类型约束、取值规则与源码级行为帮助你写出可运行、可维护的静态嵌入代码。一、组件定位静态模式下的问答渲染器StaticQuestion位于frontend/src/embedding-sdk-bundle/components/public/StaticQuestion/StaticQuestion.tsx其 Props 类型StaticQuestionProps由两部分组成export type StaticQuestionProps StaticQuestionBaseProps SdkQuestionEntityPublicProps;StaticQuestionBaseProps从SdkQuestionProps中挑选了withChartTypeSelector、height、width、className、style、initialSqlParameters、sqlParameters、onSqlParametersChange、hiddenParameters、withDownloads、withAlerts、title等 UI 与行为配置SdkQuestionEntityPublicProps则定义了下文要讲的四选一数据来源questionId/token/card/query。从实现上看StaticQuestion内部把questionId、token、card、query归一化为deserializedCard并渲染在SdkQuestion之上同时通过getEmbeddingMode({ queryMode: EmbeddingSdkStaticMode })将交互模式锁定为静态模式navigateToNewCard{null}即点击下钻不再跳转新卡片。组件同时导出了一整套子组件StaticQuestion.Filter、StaticQuestion.ChartTypeDropdown、StaticQuestion.SqlParametersList等用于自定义布局且通过withPublicComponentWrapper包装supportsGuestEmbed: true意味着它原生支持 JWT 访客嵌入。需要特别注意的是StaticQuestion是只读呈现组件主要用于展示而非编辑。若要创建新问题可通过questionIdnew笔记本编辑器或questionIdnew-nativeSQL 编辑器进入创建流程。二、数据来源 Props四种渲染内容的入口四选一StaticQuestion必须且只能提供以下四种数据源之一这是类型系统强制保证的见SdkQuestionEntityPublicProps的联合类型定义。运行时也会通过StaticQuestion.schema.ts中的 Yup 校验兜底questionId, token, card, or query is required且.noUnknown()拒绝未声明属性。Prop类型说明questionId?SdkQuestionId|null要渲染的问题 IDtoken?string|null访客嵌入Guest Embed的合法 JWT Tokencard?string|MetabaseCard不保存即可渲染的临时问题ad-hoc questionquery?MetabaseQueryObject|null通过useMetabaseQueryObject创建的基于表的临时查询1. questionId三种取值形态SdkQuestionId的类型定义位于frontend/src/embedding-sdk-bundle/types/question.tsexport type SdkQuestionId | number // 数值型问题 ID例如 123 | new // 显示新建问题的笔记本编辑器 | new-native // 显示新建原生SQL问题的编辑器 | SdkEntityId; // 实体 ID 字符串例如 abc123def456具体来说数值 ID访问问题链接http://localhost:3000/question/1-my-question时URL 中1即为数值 ID字符串 entity_id通过 API 直接返回的问题对象中的entity_id字段或通过 SDK 的 Collection Browser集合浏览器返回数据时携带的字符串 IDnew/new-native分别打开笔记本编辑器与 SQL 编辑器用于新建问题StaticQuestion.tsx中通过isNewQuestion判断并在埋点事件中区分id_new与id_new_native。2. card临时卡片的两种传递形式card用于渲染无需提前保存的临时问题支持两种形式一个完整的MetabaseCard对象一段序列化卡片字符串即从问题 URL hash 中复制的内容/question#base64或直接裸的 base64。3. query与 useMetabaseQueryObject 配合query是useMetabaseQueryObject钩子的返回值定义见MetabaseQueryObject结构类型。与card的区别在于query是仅查询的临时结构而card还可以携带visualization与visualizationSettings详见下文可视化与展示细节。内部还有一种仅供useMetabot钩子使用的字符串形态queryStaticQuestionInternalProps它不会从公共 SDK 包入口导出普通用户无需关心。三、尺寸与样式 Props精确控制组件外观StaticQuestion的根元素尺寸与样式由FlexibleSizeComponent承载见StaticQuestion.tsx中children ?? FlexibleSizeComponent ...的默认布局分支Prop类型说明width?Widthstring \| number组件宽度接受数字或 CSS 尺寸字符串height?Heightstring \| number组件高度接受数字或 CSS 尺寸字符串className?string追加到根元素的自定义 class 名style?CSSProperties追加到根元素的自定义样式对象width/height直接透传给FlexibleSizeComponent同时也会作为参数传入内部的可视化渲染SdkQuestion.QuestionVisualization保证图表区域与容器一致className/style与尺寸一样会双路透传既作用于外层容器也传给可视化区域因此可用于整体调色、圆角、边框等定制需要自定义完整布局时可以通过children传入自定义内容并配合StaticQuestion.*子组件组合此时默认的尺寸容器不再渲染。四、标题 Props默认标题与自定义标题Prop类型说明title?SdkQuestionTitleProps决定是否显示问题标题也允许传入自定义标题替代默认标题SdkQuestionTitleProps的定义为boolean | undefined | ReactNode | (() ReactNode)true/ 不传显示问题默认标题文档表格中的 Shown by defaultfalse隐藏标题ReactNode显示自定义标题内容() ReactNode以函数形式返回自定义标题。需要注意一个源码细节StaticQuestion.tsx中title的解构默认值是title false注释为 Hidden by default for backwards-compatibility为向后兼容默认隐藏。也就是说当前仓库实现中title未传入时标题默认隐藏这与官方 API 文档中 Shown by default 的描述存在差异。从源码结构推断这是组件演进过程中默认值发生过调整为获得确定行为建议显式传title{true}或自定义标题节点。这是文档与实现不一致的典型场景编写代码时应以实际版本行为为准。五、SQL 参数 Props受控与非受控的参数管理这一组 Props 是StaticQuestion最复杂也最强大的能力专门用于原生SQL问题的参数注入核心类型为SqlParameterValuesRecordstring, string | number | boolean | Array... | null | undefined以参数 slug 为键。Prop类型说明initialSqlParameters?SqlParameterValuesSQL 参数的初始值按 slug 键控仅在挂载时应用一次sqlParameters?SqlParameterValues受控的 SQL 参数值按 slug 键控每次渲染都会替换问题参数值onSqlParametersChange?(payload:SqlParameterChangePayload) voidSQL 参数变化时的回调hiddenParameters?string[]需要隐藏的参数 slug 列表initialSqlParameters一次性的初始注入initialSqlParameters只在组件挂载时应用一次此后用户在 UI 中修改参数控件不会回写宿主应用。它的三态语义非常关键设为某个值应用该值设为null严格清除该参数忽略参数自身的默认值省略或设为undefined回退到参数的默认值若参数无默认值则为null。sqlParameters受控的全量替换语义sqlParameters是**受控controlled**参数在每一次渲染时该对象会整体替换问题的参数值。规则与initialSqlParameters相似但发生在渲染期设为某值 → 使用该值设为null→ 清除即使参数有默认值从对象中省略或undefined→ 使用默认值无默认值则为null。正因如此官方推荐将sqlParameters与onSqlParametersChange配对使用以便把用户的编辑同步回宿主的受控状态避免渲染时把用户输入冲掉。onSqlParametersChange事件来源三态回调 payload 为SqlParameterChangePayload包含source、parameters、defaultParameters三个字段。其中source用来区分事件来源类型定义见frontend/src/embedding-sdk-bundle/types/question.tsinitial-state组件加载时的初始状态每次加载只触发一次manual-change用户在 UI 中手动编辑参数auto-change自动更新场景例如把归一化后的值回传给父组件。典型用法是在source manual-change时更新受控的sqlParameters状态形成闭环。hiddenParameters隐藏指定参数hiddenParameters接收一组参数 slug用于隐藏问题中不需要用户看到的参数控件。在默认布局中SQL 参数列表通过SdkQuestion.SqlParametersList渲染并且仅在isGuestEmbed访客嵌入时展示见StaticQuestion.tsx第 219 行{isGuestEmbed SdkQuestion.SqlParametersList /}非访客嵌入场景不会显示参数列表控件。六、功能开关 Props下载、告警与图表类型选择Prop类型说明withDownloads?boolean是否允许在问题中下载结果withAlerts?boolean是否允许针对该问题创建告警AlertwithChartTypeSelector?boolean是否显示图表类型选择器及对应设置按钮仅默认布局下生效withDownloads控制结果下载按钮DownloadWidgetDropdown默认布局中它始终渲染在工具栏右侧withAlerts控制告警入口QuestionAlertsButton实现中在移动端布局isMobile下会被隐藏withChartTypeSelector只影响默认布局当通过children自定义布局时你需要自行决定是否渲染StaticQuestion.ChartTypeDropdown/ChartTypeSelector子组件。此外StaticQuestion.tsx在挂载时还会通过useTrackSdkComponentMount(StaticQuestion, ...)进行组件使用埋点payload 中记录了with_title、with_downloads、with_alerts等开关状态以及新建场景下的id_new/id_new_native这有助于在宿主侧了解静态问答的使用情况。七、可视化与展示细节MetabaseCard 的进阶能力虽然MetabaseCard不是本文表格中的直接 Prop但card是它的承载类型理解它可以显著提升StaticQuestion的表现力。MetabaseCard定义于frontend/src/metabase/embedding-sdk/types/question.ts由三部分组成queryMetabaseQueryObject \| null基础查询visualization?显式指定图表类型可选table、pivot、object、list、bar、line、area、combo、row、scatter、waterfall、pie、scalar、smartscalar、gauge、progress、funnel、map、sankey、boxplot或自定义custom:...visualizationSettings?与visualization类型配对的展示细节设置例如隐藏坐标轴标签、显示数值标签、堆叠柱状图、添加目标线、调整表格列顺序等。该类型通过PickVisualizationSettings, ...对每种图表只暴露精炼的子集如CartesianVisualizationSettings、PieVisualizationSettings保证自动补全与类型检查的精确性自定义可视化custom:...则接受任意Recordstring, unknown设置。实践建议是省略visualization让 Metabase 依据查询结果自动推断图表类型仅在需要特定图表时显式设置visualization只有在需要具体展示细节时才设置visualizationSettings。八、运行时校验与组合规则速查StaticQuestion通过StaticQuestion.schema.ts中的 Yup Schema 做运行时校验核心约束如下必须有且仅有四个实体 PropquestionId/token/card/query之一否则报错questionId, token, card, or query is required.noUnknown()传入未声明的属性会被拒绝这有助于尽早发现拼写错误children及全部 Props 均为可选optional()因此最小可用用法是只传一个questionId或token。组合使用时的常见场景场景推荐组合渲染已保存问题登录态questionId{123}或questionIdentityId字符串访客嵌入渲染已保存问题token{jwt}questionId{...}渲染未保存的临时问题card{card对象或序列化字符串}基于临时查询对象渲染query{useMetabaseQueryObject(...) 的返回值}原生问题带初始参数questionIdinitialSqlParameters{{ slug: value }}原生问题受控参数questionIdsqlParametersonSqlParametersChange九、默认布局与自定义布局不传children时StaticQuestion渲染默认布局见StaticQuestion.tsx的默认分支顶部栏TopBar标题受title控制→ 工具栏图表类型下拉、下载按钮、告警按钮→ 访客嵌入下的 SQL 参数列表主区域SdkQuestion.QuestionVisualization渲染图表结果。传入children时你可以完全掌控布局自由组合以下子组件StaticQuestionComponentsFilter、FilterDropdown、ResetButton、Title、Summarize、SummarizeDropdown、QuestionVisualization、ChartTypeSelector、ChartTypeDropdown、QuestionSettings、QuestionSettingsDropdown、Breakout、BreakoutDropdown、DownloadWidget、DownloadWidgetDropdown、AlertsButton、SqlParametersList。这也解释了为什么withChartTypeSelector的文档注明仅在使用默认布局时生效——自定义布局下该开关不再自动注入图表类型选择器。结语StaticQuestion的 17 个 Props 共同构成了 Metabase 静态嵌入问答能力的完整控制面四选一的数据来源、可双向透传的尺寸样式、带默认值演进历史的标题控制、受控/非受控双模式的 SQL 参数体系以及三个功能开关。理解并组合它们即可在不暴露 Metabase 界面的前提下把只读 受控交互的问答能力无缝嵌入任何 React 宿主应用。若需进一步深入可直接阅读 StaticQuestion.tsx 的实现、类型定义 与 运行时校验 Schema并结合 SDK 入口导出 sdk-bundle-exports.ts 确认公共 API 边界。【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Metabase Embedding SDK 的 StaticQuestion 组件 Props 完全指南：静态嵌入问答组件的 17 个配置项详解
Metabase Embedding SDK 的 StaticQuestion 组件 Props 完全指南静态嵌入问答组件的 17 个配置项详解【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase导读StaticQuestion是 Metabase Embedding SDK 中用于**静态嵌入Static Embedding / Guest Embed**场景的核心 React 组件它允许你在宿主应用中渲染一个只读、可交互的问答Question视图支持传入问题 ID、JWT Token、反序列化卡片或查询对象四种数据源并可精细控制标题、尺寸、SQL 参数与下载/告警等能力。本文以官方 API 文档的 Props 表格为骨架结合仓库内StaticQuestion组件的真实实现与类型定义逐一拆解全部 17 个配置项的语义、类型约束、取值规则与源码级行为帮助你写出可运行、可维护的静态嵌入代码。一、组件定位静态模式下的问答渲染器StaticQuestion位于frontend/src/embedding-sdk-bundle/components/public/StaticQuestion/StaticQuestion.tsx其 Props 类型StaticQuestionProps由两部分组成export type StaticQuestionProps StaticQuestionBaseProps SdkQuestionEntityPublicProps;StaticQuestionBaseProps从SdkQuestionProps中挑选了withChartTypeSelector、height、width、className、style、initialSqlParameters、sqlParameters、onSqlParametersChange、hiddenParameters、withDownloads、withAlerts、title等 UI 与行为配置SdkQuestionEntityPublicProps则定义了下文要讲的四选一数据来源questionId/token/card/query。从实现上看StaticQuestion内部把questionId、token、card、query归一化为deserializedCard并渲染在SdkQuestion之上同时通过getEmbeddingMode({ queryMode: EmbeddingSdkStaticMode })将交互模式锁定为静态模式navigateToNewCard{null}即点击下钻不再跳转新卡片。组件同时导出了一整套子组件StaticQuestion.Filter、StaticQuestion.ChartTypeDropdown、StaticQuestion.SqlParametersList等用于自定义布局且通过withPublicComponentWrapper包装supportsGuestEmbed: true意味着它原生支持 JWT 访客嵌入。需要特别注意的是StaticQuestion是只读呈现组件主要用于展示而非编辑。若要创建新问题可通过questionIdnew笔记本编辑器或questionIdnew-nativeSQL 编辑器进入创建流程。二、数据来源 Props四种渲染内容的入口四选一StaticQuestion必须且只能提供以下四种数据源之一这是类型系统强制保证的见SdkQuestionEntityPublicProps的联合类型定义。运行时也会通过StaticQuestion.schema.ts中的 Yup 校验兜底questionId, token, card, or query is required且.noUnknown()拒绝未声明属性。Prop类型说明questionId?SdkQuestionId|null要渲染的问题 IDtoken?string|null访客嵌入Guest Embed的合法 JWT Tokencard?string|MetabaseCard不保存即可渲染的临时问题ad-hoc questionquery?MetabaseQueryObject|null通过useMetabaseQueryObject创建的基于表的临时查询1. questionId三种取值形态SdkQuestionId的类型定义位于frontend/src/embedding-sdk-bundle/types/question.tsexport type SdkQuestionId | number // 数值型问题 ID例如 123 | new // 显示新建问题的笔记本编辑器 | new-native // 显示新建原生SQL问题的编辑器 | SdkEntityId; // 实体 ID 字符串例如 abc123def456具体来说数值 ID访问问题链接http://localhost:3000/question/1-my-question时URL 中1即为数值 ID字符串 entity_id通过 API 直接返回的问题对象中的entity_id字段或通过 SDK 的 Collection Browser集合浏览器返回数据时携带的字符串 IDnew/new-native分别打开笔记本编辑器与 SQL 编辑器用于新建问题StaticQuestion.tsx中通过isNewQuestion判断并在埋点事件中区分id_new与id_new_native。2. card临时卡片的两种传递形式card用于渲染无需提前保存的临时问题支持两种形式一个完整的MetabaseCard对象一段序列化卡片字符串即从问题 URL hash 中复制的内容/question#base64或直接裸的 base64。3. query与 useMetabaseQueryObject 配合query是useMetabaseQueryObject钩子的返回值定义见MetabaseQueryObject结构类型。与card的区别在于query是仅查询的临时结构而card还可以携带visualization与visualizationSettings详见下文可视化与展示细节。内部还有一种仅供useMetabot钩子使用的字符串形态queryStaticQuestionInternalProps它不会从公共 SDK 包入口导出普通用户无需关心。三、尺寸与样式 Props精确控制组件外观StaticQuestion的根元素尺寸与样式由FlexibleSizeComponent承载见StaticQuestion.tsx中children ?? FlexibleSizeComponent ...的默认布局分支Prop类型说明width?Widthstring \| number组件宽度接受数字或 CSS 尺寸字符串height?Heightstring \| number组件高度接受数字或 CSS 尺寸字符串className?string追加到根元素的自定义 class 名style?CSSProperties追加到根元素的自定义样式对象width/height直接透传给FlexibleSizeComponent同时也会作为参数传入内部的可视化渲染SdkQuestion.QuestionVisualization保证图表区域与容器一致className/style与尺寸一样会双路透传既作用于外层容器也传给可视化区域因此可用于整体调色、圆角、边框等定制需要自定义完整布局时可以通过children传入自定义内容并配合StaticQuestion.*子组件组合此时默认的尺寸容器不再渲染。四、标题 Props默认标题与自定义标题Prop类型说明title?SdkQuestionTitleProps决定是否显示问题标题也允许传入自定义标题替代默认标题SdkQuestionTitleProps的定义为boolean | undefined | ReactNode | (() ReactNode)true/ 不传显示问题默认标题文档表格中的 Shown by defaultfalse隐藏标题ReactNode显示自定义标题内容() ReactNode以函数形式返回自定义标题。需要注意一个源码细节StaticQuestion.tsx中title的解构默认值是title false注释为 Hidden by default for backwards-compatibility为向后兼容默认隐藏。也就是说当前仓库实现中title未传入时标题默认隐藏这与官方 API 文档中 Shown by default 的描述存在差异。从源码结构推断这是组件演进过程中默认值发生过调整为获得确定行为建议显式传title{true}或自定义标题节点。这是文档与实现不一致的典型场景编写代码时应以实际版本行为为准。五、SQL 参数 Props受控与非受控的参数管理这一组 Props 是StaticQuestion最复杂也最强大的能力专门用于原生SQL问题的参数注入核心类型为SqlParameterValuesRecordstring, string | number | boolean | Array... | null | undefined以参数 slug 为键。Prop类型说明initialSqlParameters?SqlParameterValuesSQL 参数的初始值按 slug 键控仅在挂载时应用一次sqlParameters?SqlParameterValues受控的 SQL 参数值按 slug 键控每次渲染都会替换问题参数值onSqlParametersChange?(payload:SqlParameterChangePayload) voidSQL 参数变化时的回调hiddenParameters?string[]需要隐藏的参数 slug 列表initialSqlParameters一次性的初始注入initialSqlParameters只在组件挂载时应用一次此后用户在 UI 中修改参数控件不会回写宿主应用。它的三态语义非常关键设为某个值应用该值设为null严格清除该参数忽略参数自身的默认值省略或设为undefined回退到参数的默认值若参数无默认值则为null。sqlParameters受控的全量替换语义sqlParameters是**受控controlled**参数在每一次渲染时该对象会整体替换问题的参数值。规则与initialSqlParameters相似但发生在渲染期设为某值 → 使用该值设为null→ 清除即使参数有默认值从对象中省略或undefined→ 使用默认值无默认值则为null。正因如此官方推荐将sqlParameters与onSqlParametersChange配对使用以便把用户的编辑同步回宿主的受控状态避免渲染时把用户输入冲掉。onSqlParametersChange事件来源三态回调 payload 为SqlParameterChangePayload包含source、parameters、defaultParameters三个字段。其中source用来区分事件来源类型定义见frontend/src/embedding-sdk-bundle/types/question.tsinitial-state组件加载时的初始状态每次加载只触发一次manual-change用户在 UI 中手动编辑参数auto-change自动更新场景例如把归一化后的值回传给父组件。典型用法是在source manual-change时更新受控的sqlParameters状态形成闭环。hiddenParameters隐藏指定参数hiddenParameters接收一组参数 slug用于隐藏问题中不需要用户看到的参数控件。在默认布局中SQL 参数列表通过SdkQuestion.SqlParametersList渲染并且仅在isGuestEmbed访客嵌入时展示见StaticQuestion.tsx第 219 行{isGuestEmbed SdkQuestion.SqlParametersList /}非访客嵌入场景不会显示参数列表控件。六、功能开关 Props下载、告警与图表类型选择Prop类型说明withDownloads?boolean是否允许在问题中下载结果withAlerts?boolean是否允许针对该问题创建告警AlertwithChartTypeSelector?boolean是否显示图表类型选择器及对应设置按钮仅默认布局下生效withDownloads控制结果下载按钮DownloadWidgetDropdown默认布局中它始终渲染在工具栏右侧withAlerts控制告警入口QuestionAlertsButton实现中在移动端布局isMobile下会被隐藏withChartTypeSelector只影响默认布局当通过children自定义布局时你需要自行决定是否渲染StaticQuestion.ChartTypeDropdown/ChartTypeSelector子组件。此外StaticQuestion.tsx在挂载时还会通过useTrackSdkComponentMount(StaticQuestion, ...)进行组件使用埋点payload 中记录了with_title、with_downloads、with_alerts等开关状态以及新建场景下的id_new/id_new_native这有助于在宿主侧了解静态问答的使用情况。七、可视化与展示细节MetabaseCard 的进阶能力虽然MetabaseCard不是本文表格中的直接 Prop但card是它的承载类型理解它可以显著提升StaticQuestion的表现力。MetabaseCard定义于frontend/src/metabase/embedding-sdk/types/question.ts由三部分组成queryMetabaseQueryObject \| null基础查询visualization?显式指定图表类型可选table、pivot、object、list、bar、line、area、combo、row、scatter、waterfall、pie、scalar、smartscalar、gauge、progress、funnel、map、sankey、boxplot或自定义custom:...visualizationSettings?与visualization类型配对的展示细节设置例如隐藏坐标轴标签、显示数值标签、堆叠柱状图、添加目标线、调整表格列顺序等。该类型通过PickVisualizationSettings, ...对每种图表只暴露精炼的子集如CartesianVisualizationSettings、PieVisualizationSettings保证自动补全与类型检查的精确性自定义可视化custom:...则接受任意Recordstring, unknown设置。实践建议是省略visualization让 Metabase 依据查询结果自动推断图表类型仅在需要特定图表时显式设置visualization只有在需要具体展示细节时才设置visualizationSettings。八、运行时校验与组合规则速查StaticQuestion通过StaticQuestion.schema.ts中的 Yup Schema 做运行时校验核心约束如下必须有且仅有四个实体 PropquestionId/token/card/query之一否则报错questionId, token, card, or query is required.noUnknown()传入未声明的属性会被拒绝这有助于尽早发现拼写错误children及全部 Props 均为可选optional()因此最小可用用法是只传一个questionId或token。组合使用时的常见场景场景推荐组合渲染已保存问题登录态questionId{123}或questionIdentityId字符串访客嵌入渲染已保存问题token{jwt}questionId{...}渲染未保存的临时问题card{card对象或序列化字符串}基于临时查询对象渲染query{useMetabaseQueryObject(...) 的返回值}原生问题带初始参数questionIdinitialSqlParameters{{ slug: value }}原生问题受控参数questionIdsqlParametersonSqlParametersChange九、默认布局与自定义布局不传children时StaticQuestion渲染默认布局见StaticQuestion.tsx的默认分支顶部栏TopBar标题受title控制→ 工具栏图表类型下拉、下载按钮、告警按钮→ 访客嵌入下的 SQL 参数列表主区域SdkQuestion.QuestionVisualization渲染图表结果。传入children时你可以完全掌控布局自由组合以下子组件StaticQuestionComponentsFilter、FilterDropdown、ResetButton、Title、Summarize、SummarizeDropdown、QuestionVisualization、ChartTypeSelector、ChartTypeDropdown、QuestionSettings、QuestionSettingsDropdown、Breakout、BreakoutDropdown、DownloadWidget、DownloadWidgetDropdown、AlertsButton、SqlParametersList。这也解释了为什么withChartTypeSelector的文档注明仅在使用默认布局时生效——自定义布局下该开关不再自动注入图表类型选择器。结语StaticQuestion的 17 个 Props 共同构成了 Metabase 静态嵌入问答能力的完整控制面四选一的数据来源、可双向透传的尺寸样式、带默认值演进历史的标题控制、受控/非受控双模式的 SQL 参数体系以及三个功能开关。理解并组合它们即可在不暴露 Metabase 界面的前提下把只读 受控交互的问答能力无缝嵌入任何 React 宿主应用。若需进一步深入可直接阅读 StaticQuestion.tsx 的实现、类型定义 与 运行时校验 Schema并结合 SDK 入口导出 sdk-bundle-exports.ts 确认公共 API 边界。【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考