请教umi如何使用mobx？使用装饰器语法+mobx HOC，目前看起来无法正常触发渲染。

[Snorlaxx-plot]

版本：
"mobx": "^6.12.0",
"mobx-react-lite": "^4.0.5",
"umi": "^4.0.89"

使用mobx状态的组件
`import { SlidersOutlined } from '@ant-design/icons';
import { Button, Input, Space } from 'antd';
import { observer } from 'mobx-react-lite';
import { useRef } from 'react';
import './custom-nodes/register';
import { graphStateVM1 } from './graph-state';

const { TextArea } = Input;

const CCFlow = observer(() => {
const ref = useRef<HTMLDivElement | null>(null);
const { editAreaVisible, setEditAreaVisible } = graphStateVM1;
// console.log(editAreaVisible, vm);

return (

<div
className="draw-container"
style={{ width: '100%' }}
ref={ref}
>

<Button
icon={}
onClick={() => setEditAreaVisible()}
/>
<Button
icon={}
onClick={() => console.log(editAreaVisible)}
/>

{editAreaVisible}

{editAreaVisible ?

111

: null}

);
});

export default CCFlow;
mobx store代码import { action, observable } from 'mobx';

class GraphStateVM1 {
@observable editAreaVisible = true;

@action
setEditAreaVisible = (visible?: boolean) => {
console.log('edit', this.editAreaVisible);
if (visible === undefined) {
this.editAreaVisible = !this.editAreaVisible;
return;
}
this.editAreaVisible = visible;
};
}

export const graphStateVM1 = new GraphStateVM1();
tsconfig配置{
"extends": "./src/.umi/tsconfig.json",
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"importHelpers": true,
}
}
config.ts配置import { defineConfig } from 'umi';
import routes from './routes';

export default defineConfig({
routes,
npmClient: 'pnpm',
favicons: [
// 完整地址
'https://console.caochuan.cc/nginx/release/logo.jpg',
// 此时将指向 /favicon.png ，确保你的项目含有 public/favicon.png
'/favicon.ico',
],
extraBabelPlugins: ['@babel/plugin-proposal-decorators'],
classPropertiesLoose: {},
});
`

[fz6m]

不需要自己配 @babel/plugin-proposal-decorators 插件，deco 功能是默认开启的。

如有问题，需要给一个最小复现仓库。

[Snorlaxx-plot]

感谢回复，最小仓库在：https://github.com/Snorlaxx-plot/umi-mobx.git ～

[fz6m]

以下是我可以运行的示例：

  pnpm add tslib

// tsconfig.json
{
  "extends": "./src/.umi/tsconfig.json",
  "compilerOptions": {
+   "experimentalDecorators": true,
+   "emitDecoratorMetadata": true
  }
}

// index.ts

import { observer } from 'mobx-react-lite'
import { counterStore } from './store'

const Page = observer(({ counter }: { counter: typeof counterStore }) => {
  return (
    <div>
      {counter.count}
      <button
        onClick={() => {
          counter.increment()
        }}
      >
        +
      </button>
    </div>
  )
})

export default function C() {
  return <Page counter={counterStore} />
}

// store.ts

import { makeObservable, observable, action } from 'mobx'

class Counter {
  @observable count = 0

  constructor() {
    makeObservable(this)
  }

  @action
  increment() {
    this.count++
  }
}
export const counterStore = new Counter()

这是从 mobx 文档 copy 的代码：详见 Decorators > Using legacy decorators ，但是 mobx v6 建议使用 ecma deco ，由于涉及到 class accessor 新语法，现在 umi 还不支持 ecma deco 这个语法，故只能使用 legacy TS deco 。

另外：

1. 不建议使用 deco ，因为现在主流是函数式编程，mobx 的首选示例也是不使用装饰器版本的，详见 React integration 。

2. 不建议使用 mobx ，因为 mobx 是一种 react 反模式，现代 react 数据流更推荐使用 jotai 或 valtio ，亦或是 zustand 。

[Snorlaxx-plot]

感谢你的帮助和建议，参考你的答案没有使用装饰器了，可以正常使用了～