小编Bar*_*rty的帖子

我有一个布局，其中有左侧导航、顶部导航栏，然后是子组件的主要区域。问题是所有子组件都稍微向下推过屏幕底部。

我可以通过添加 pb-36 来解决这个问题，但这会留下一个恼人的间隙。

const style = {
  container: `h-screen overflow-hidden relative `,
  mainContainer: `bg-gray-800 flex flex-col  pl-0   w-full lg:w-[calc(100%-13rem)]`,
  main: `bg-gray-100  h-screen overflow-auto lg:rounded-tl-3xl `,
};

渲染部分：

 <LayoutProvider>
      <div className={style.container}>
        <div className="flex items-start">
          <Overlay />
          <SideNavigation mobilePosition="left" />
          <div className={style.mainContainer}>
            <TopNavigation />
            <main className={style.main}>{children}</main>
          </div>
        </div>
      </div>
    </LayoutProvider>

例如，如果我删除上面的 TopNavigation，那么它将删除标题，然后子组件将正确适合。因此子组件会向下偏移那么多。

顶部导航是：

 <header className="bg-gray-800 h-[74px] items-center relative w-full ">

我正在尝试创建一个可以放置在我的应用程序中的画布组件。

最终我会做到这一点，以便用户可以在上面绘图。

错误在这一行：

const context = canvas.getContext("2d");

对象可能为“空”

如果我把它改成：

const context = canvas?.getContext("2d");

我得到：

属性“getContext”在类型“never”上不存在

这是该组件的完整代码：

const Canvas = (props: CanvasProps) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");
    //Our first draw
    context.fillStyle = "#000000";
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  }, []);

  return <canvas ref={canvasRef} {...props} />;
};

export default Canvas;