使用Looker可视化组件报错：需用<Container.Provider>包裹组件

我编写了如下app.js代码：

import { sdk } from "../src/helpers/CorsSession";
import { Query, Visualization } from "@looker/visualizations";
import { DataProvider } from "@looker/components-data";
import { ComponentsProvider } from "@looker/components";

function App() {
  return (
    <>
      <h1>Get started with Looker visualization components</h1>
      <ComponentsProvider>
        <DataProvider sdk={sdk}>
          {/* Change this query slug to match your query slug */}
          <Query query="97f65408-be03-4e88-a2ec-99b9387ba9f6">
            <Visualization />
          </Query>
        </DataProvider>
      </ComponentsProvider>
    </>
  );
}

export default App;

运行时抛出错误：

Component must be wrapped with <Container.Provider>

请问我哪里操作有误？

你漏加了Looker组件依赖的Container.Provider上下文包裹。需要从@looker/components导入Container，并将ComponentsProvider放在Container.Provider内部。

修改后的完整代码：

import { sdk } from "../src/helpers/CorsSession";
import { Query, Visualization } from "@looker/visualizations";
import { DataProvider } from "@looker/components-data";
import { ComponentsProvider, Container } from "@looker/components";

function App() {
  return (
    <>
      <h1>Get started with Looker visualization components</h1>
      <Container.Provider>
        <ComponentsProvider>
          <DataProvider sdk={sdk}>
            {/* Change this query slug to match your query slug */}
            <Query query="97f65408-be03-4e88-a2ec-99b9387ba9f6">
              <Visualization />
            </Query>
          </DataProvider>
        </ComponentsProvider>
      </Container.Provider>
    </>
  );
}

export default App;

关键修改点：

• 新增从@looker/components导入Container
• 用Container.Provider包裹整个ComponentsProvider层级，让内部的Looker组件能获取到必要的上下文环境

内容的提问来源于stack exchange，提问作者Md. Parvez Alam