时间戳

首页 > 解决方案 > React chakra ui 画布宽度和高度初始化为零并且无法渲染？

javascript - React chakra ui 画布宽度和高度初始化为零并且无法渲染？

问题描述

这是codeandbox链接

这是代码

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 如何呈现事物的问题。

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

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

标签： javascriptcssreactjscanvaschakra-ui

解决方案

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

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

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

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

推荐阅读