【实战】从零开始打造一个低代码平台——9、组件编辑（中）-5. 重构画布

由于我们需要将一个Widget传递给Attrs，所以我们也需要对Canvas进行一些小的重构。

import { useCurrScr } from '../hooks/useCurrScr';
import { useWidgetStore } from '../stores/widget.store';
import { Attrs } from "./attrs";
import { Canvas } from "./canvas";
import { WidgetBar } from "./widgetbar";

interface ContentProps {
  className?: string;
}

export const Content: React.FC<ContentProps> = ({ className }) => {
  const currWidgetId = useWidgetStore((state) => state.currWidgetId);
  const { currScr } = useCurrScr();

  const currWidget = currScr?.children.find((w) => w.id === currWidgetId);

  return (
    <div className={`relative h-full ${className?? ""}`}>
      <WidgetBar />
      <div className="flex h-full">
        <div className="flex-1 flex justify-center items-center">
          <Canvas className="w-[360pt] h-[240pt] bg-white" />
        </div>
        <div className="w-[2px]  h-full bg-gray-950" />
        <Attrs widget={currWidget} />
      </div>
    </div>
  );
};

在Canvas中，我们获取当前组件并将其传递给Attrs。