Reactjs 在Mobx中侦听窗口大小调整事件不更新后台组件'；s宽&；康瓦高度

我在Mobx中有一个可观察的

win

，当窗口调整大小时，它会被更新

updateWin

函数更新可观察的

win

FrameItStore.tsx

宽度

和

高度

在商店中得到更新，但我看不到组件中的效果

如果我将

console.log（this.win）

放在

updateWin

函数中，它会显示更新的值。但我在组件中看不到更新的值

我已经放置了另外两个

console.log

语句

URLBar.tsx

import*as React from“React”；
从“react konva”导入{Rect}；
从“./store/index”导入{useFrameItStore}；
从“./类型/索引”导入{TrafficSignalPosition，Window}；
导出常量URLBar=（）=>{
const frameItStore=useFrameItStore（）；
console.log（“URLBar.tsx=►", frameItStore.win.width）；
const-box:Window=frameItStore.box；
const trafficSignalPosition:trafficSignalPosition=
frameItStore.trafficSignalPosition；
返回(
);
};

Konva.tsx

import*as React from“React”；
从“react konva”导入{Stage，Layer}；
从“./store/index”导入{FrameItContext}；
从“/index”导入{BrowserWindow、SiteImage、TrafficSignal、URLBar}；
从“konva/types/Stage”导入{Stage as StageType}；
导出类Konva扩展React.Component{
静态contextType=FrameItContext；
context！：React.ContextType；
stageRef=React.createRef（）；
handleExportClick=（）=>{
console.log(
这是舞台
.current！.getStage（）文件
.toDataURL（{mimeType:“图像/jpeg”，质量：1}）
);
};
render（）{
const{win}=this.context；
console.log（“Konva.tsx-►“，win.width）；
返回(
下载图像
);
}
}

但是没有任何

控制台.log

再次打印。它也不会更新我的Konva

Stage

的

宽度

和

高度

，因此

Stage

会有响应

---

我遗漏了什么吗？制作了一个最小的代码沙盒。请注意控制台，它不会更改值。

您需要将组件包装到

observer

decorator中，以使其与MobX一起工作

import { observer } from "mobx-react";

class KonvaComponent extends React.Component {
  // ..
}

export const Konva = observer(KonvaComponent)

或者，如果您使用decorator建议：

import { observer } from "mobx-react";

@observer
export class Konva extends React.Component {
  // ..
}

---

谢谢，这很有效。我试着使用

Observer

组件，但它不起作用，为什么？

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

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

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

export class Konva extends React.Component {
  static contextType = FrameItContext;
  context!: React.ContextType<typeof FrameItContext>;

  stageRef = React.createRef<StageType>();

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

  render() {
    const { win } = this.context;
    console.log("Konva.tsx -►", win.width);

    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>
      </>
    );
  }
}

import { observer } from "mobx-react";

class KonvaComponent extends React.Component {
  // ..
}

export const Konva = observer(KonvaComponent)

import { observer } from "mobx-react";

@observer
export class Konva extends React.Component {
  // ..
}