gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:41:34 26 4
gpt4 key购买 nike

我正在尝试将 mobx 融入到我用 React 360 制作的 VR 应用程序中。我尝试过使用装饰器语法,但在浪费了大量时间尝试实现它之后,我决定使用非装饰器语法。这是我从 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);

请注意 Timer 类上的 observer 声明。文档说明了这一点。

Note that using @observer as decorator is optional, observer(class Timer ... { }) achieves exactly the same.

这是实现Timer的正确方法吗?

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

最佳答案

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

创建您的 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 方法将它们全部注入(inject)到您的组件中,并通过 this.props 以相同的方式使用它们>,例如

导出默认注入(inject)('myStore', 'anotherStore', 'anotherNewStore')(observer(Timer));

关于javascript - 如何在没有装饰器语法的情况下使用 mobx-react 'observer' ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53877379/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com