React chakra ui画布宽度和高度初始化为零，无法渲染?

Question

codesandbox链接

这里是代码

import "./styles.css";
import {
Flex,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs
} from "@chakra-ui/react";
import { SketchField, Tools } from "react-sketch";
export default function App() {
return (
<Flex height="100vh" width="100vw">
<Tabs width="100%" display="flex" flexDirection="column" defaultIndex={0}>
<TabList>
{["Play", "Draw"].map((val) => (
<Tab key={Math.random()}>{val}</Tab>
))}
</TabList>
<TabPanels flex="1 1 auto">
<TabPanel padding={0} height="100%">
<h1>Hello world </h1>
</TabPanel>
<TabPanel padding={0} height="100%">
<Flex height="100%" width="100%">
<SketchField
width="100%"
height="100%"
widthCorrection={0}
tool={Tools.Pencil}
lineColor="#3182CE"
lineWidth={3}
/>
</Flex>
</TabPanel>
</TabPanels>
</Tabs>
</Flex>
);
}

我试图有两个标签;第一个标签显示"Hello World"而第二个选项卡有一个画布元素(我使用的是react-sketch)。但是，当我单击第二个选项卡时，画布元素没有被呈现。由于某种原因，它的宽度和高度都是零。我最初认为这是react-sketch的问题，所以我尝试了另一个画布组件(react-canvas-draw)，同样的问题仍然存在于该组件。所以这很可能是Chakra UI标签如何工作或react如何渲染事物的问题。

如何解决这个问题?我想让我的canvas组件取"剩余的高度和宽度"这就是为什么我使用的东西，如"100%"，而不是vh或vw，因为我不知道高度或宽度，将保留为我的画布组件。

注意:然而，我注意到一个有趣的事情是，如果你改变defaultIndex为1(即:(使第二个选项卡初始活动)，画布组件工作。不知道为什么这个可以，而另一个不行。

Answer 1

我不知道你在line26处用<Flex>包装元素的目的是什么，但是删除它就可以了 更新:我的错。我对沙盒刷新机制感到困惑，并认为上述工作。

实际上，看起来htmlcanvas没有赶上脉轮UI选项卡渲染。将isLazy道具添加到Chakra<Tabs>组件

裁判:https://chakra-ui.com/docs/disclosure/tabs lazily-mounting-tab-panels