代码之家 › 专栏 › 技术社区 › Dan Rubio

如何在没有装饰语法的情况下使用mobx react'observer'?

mobx-react mobx reactjs javascript

Dan Rubio · 技术社区 · 6 年前

我在试着给霍恩穿鞋子 mobx

import {observer} from "mobx-react";

var timerData = observable({
    secondsPassed: 0
});

setInterval(() => {
    timerData.secondsPassed++;
}, 1000);

@observer class Timer extends React.Component {
    render() {
        return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
    }
};

ReactDOM.render(<Timer timerData={timerData} />, document.body);

注意 observer Timer 班级。文件说明了这一点。

observer(class Timer extends React.Component {
  render() {
    return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
  }
})

1 回复 | 直到 6 年前

Mohamed Ibrahim Elsayed 6 年前

关于您添加的代码片段,我不知道它是否有效,但以下是我在应用程序项目中使用MobX而不使用decorator语法的方法:

比如说,创建你的MobX商店 MyStore.js

import {observable, action, computed, decorate} from 'mobx';

export default class MyStore {
    storeMap = observable(new Map());
    storeArray = observable([]);
    storeBoolean = false

    get storeMapSize() {
        return this.storeMap.size;
    }

    setStoreBoolean(value) {
        this.storeBoolean = value;
    }
}

decorate(MyStore, {
    storeMap: observable,
    storeArray: observable,
    storeBoolean: observable

    storeMapSize: computed,

    setStoreBoolean: action
});

然后在组件中 Timer.js :

import {inject, observer} from "mobx-react";

class Timer extends React.Component {
    render() {
        return (<span>value from store: { this.props.myStore.storeMap.get('any_key') } </span> )
    }
}

export default inject('myStore')(observer(Timer));

您可以创建任意多个存储,并使用相同的方法将所有存储注入到组件中 inject 方法,并通过 this.props ,例如

export default inject('myStore', 'anotherStore', 'anotherNewStore')(observer(Timer));

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

5 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前