React chakra ui canvas 宽度和高度初始化为零且无法渲染？

Question

这是代码

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”，而第二个选项卡有一个 canvas 元素（我正在使用 react-sketch）。但是，当我单击第二个选项卡时，未呈现 canvas 元素。由于某种原因，它的宽度和高度为零。我最初以为这是react-sketch的问题，所以我尝试了另一个canvas组件（react-canvas-draw），该组件仍然存在同样的问题。所以这很可能是 Chakra UI 选项卡的工作方式或 React 渲染方式的问题。

如何解决这个问题？我想让我的 canvas 组件采用“剩余的高度和宽度”，这就是为什么我使用“100%”之类的东西而不是 vh 或 vw 的原因，因为我不知道它的高度或宽度剩下的用于我的 canvas 组件。

注意：但是我注意到一件有趣的事情是，如果您将 defaultIndex 更改为 1（即，使第二个选项卡最初处于活动状态），canvas 组件会起作用。不确定为什么这行得通而另一种方法行不通。

Answer 1

~~我不知道你在第 26 行用 <Flex> 包装元素的目的是什么，但是删除它就可以了。~~

更新：我的错。我对沙盒刷新机制感到困惑，认为上面的方法有效。

实际上，html canvas 似乎没有赶上脉轮 UI 标签渲染。将 isLazy 道具添加到 Chakra <Tabs> 组件。

参考：https://chakra-ui.com/docs/disclosure/tabs#lazily-mounting-tab-panels

React chakra ui canvas 宽度和高度初始化为零且无法渲染？

React chakra ui canvas width and height initializing to zero and unable to render?

javascript

css

canvas

reactjs

chakra-ui