这是代码
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(即,使第二个选项卡最初处于活动状态),画布组件将起作用。不知道为什么这行得通,而另一种方式则行不通。