React Class Component에서 Mobx Store의 값을 사용하시겠습니까?

React Class Component에서 Mobx Store의 값을 사용하시겠습니까?

React Class 구성 요소의 후크에 액세스하고 싶다.

콘바.tsx

import * as React from "react";
import { Stage, Layer } from "react-konva";

import { useFrameItStore } from "../store/index";
import { BrowserWindow, SiteImage, TrafficSignal, URLBar } from "./index";

import { Window } from "../types/index";
import { Stage as StageType } from "konva/types/Stage";

export class Konva extends React.Component {
  stageRef = React.createRef<StageType>();

  handleExportClick = () => {
    console.log(
      this.stageRef
        .current!.getStage()
        .toDataURL({ mimeType: "image/jpeg", quality: 1 })
    );
  };

  render() {
    // const frameItStore = useFrameItStore();
    const win: Window = { width: 800, height: 600 }; // frameItStore.win;

    return (
      <>
        <Stage width={win.width} height={win.height} ref={this.stageRef}>
          <Layer>
            <BrowserWindow />
            <URLBar />
            <TrafficSignal />
            <SiteImage />
          </Layer>
        </Stage>
        <button
          style={{ position: "absolute", top: "0" }}
          onClick={this.handleExportClick}
        >
          Download Image
        </button>
      </>
    );
  }
}

사용하고 싶다useFrameItStore()상기의 코드에 코멘트되어 있는 후크를 설정한다.width&height

store/FrameItStore.tsx

import { makeObservable, observable, action, computed } from "mobx";

import { Point, TrafficSignalPosition, IFrameItStore } from "@/types/index";

export class FrameItStore implements IFrameItStore {
  id = 0;
  win = {
    width: window.innerWidth,
    height: window.innerHeight
  };
  box = {
    width: 1024,
    height: 600
  };
  trafficSignalColors = [
    {
      close: "#EF4444",
      minimize: "#FBBE25",
      maximize: "#49DE80"
    },
    {
      close: "black",
      minimize: "blue",
      maximize: "orange"
    }
  ];

  constructor() {
    makeObservable(this, {
      win: observable,
      updateWin: action,
      box: observable,
      boxCenter: computed,
      trafficSignalPosition: computed,
      trafficSignalColors: observable,
      id: observable
    });

    window.addEventListener("resize", this.updateWin);
  }

  updateWin() {
    if (typeof window === "object") {
      console.log(this.win);
      console.log(window.innerWidth);
      console.log(window.innerHeight);
      this.win.width = window.innerWidth;
      this.win.height = window.innerHeight;
    }
  }

  destroyWin() {
    window.removeEventListener("resize", this.updateWin);
  }

  get boxCenter(): Point {
    return {
      x: (this.win.width - this.box.width) / 2,
      y: (this.win.height - this.box.height) / 2
    };
  }

  get trafficSignalPosition(): TrafficSignalPosition {
    return {
      close: { x: this.boxCenter.x + 20, y: this.boxCenter.y + 20 },
      minimize: { x: this.boxCenter.x + 2 * 20, y: this.boxCenter.y + 20 },
      maximize: { x: this.boxCenter.x + 3 * 20, y: this.boxCenter.y + 20 }
    };
  }
}

store/FrameItContext.tsx

import * as React from "react";
import { useLocalObservable } from "mobx-react";

import { FrameItStore } from "./index";

import { IFrameItStore } from "../types/index";

const FrameItContext = React.createContext<IFrameItStore>(new FrameItStore());

// export const FrameItProvider = ({ children }: { children: React.ReactChild }) => {
//  const frameItStore = useLocalObservable(() => new FrameItStore())

//  return <FrameItContext.Provider value={frameItStore}>{children}</FrameItContext.Provider>
// }

export const useFrameItStore = () => React.useContext(FrameItContext);

하지만 나는 클래스 컴포넌트에 Hooks를 사용할 수 없다.완전한 샌드박스를 만들었다 → https://codesandbox.io/s/frameit-mobx-konva-ns62n

에서 스토어에 액세스하는 방법Konva.tsx철해 주시겠습니까?

클래스 구성 요소에 를 설정하여 다음에 대한 컨텍스트 값에 대한 액세스 권한을 얻을 수 있음this.context.

export class Konva extends React.Component {
  // ...

  static contextType = FrameItContext;
  context!: React.ContextType<typeof FrameItContext>;

  render() {
    const { win } = this.context;

    // ...
  }
}

너비와 높이를 관측 가능한 값의 일부로 추가한 다음 필요에 따라 FrameItStore.tsx의 값을 변경하십시오.

참조URL: https://stackoverflow.com/questions/65419992/use-mobx-stores-value-in-react-class-component