在MobX中,要使类对象可见,需要遵循以下步骤:
下面是一个示例代码,演示如何使类对象在MobX中可见:
import { observable, action } from "mobx";
import { observer } from "mobx-react";
class User {
@observable name = "John";
@observable age = 25;
@action
updateName(newName) {
this.name = newName;
}
@action
updateAge(newAge) {
this.age = newAge;
}
}
const user = new User();
@observer
class UserComponent extends React.Component {
render() {
return (
<div>
<p>Name: {user.name}</p>
<p>Age: {user.age}</p>
</div>
);
}
}
// 在需要观察类对象的地方使用UserComponent
在上面的示例中,我们创建了一个名为"User"的类对象,并使用@observable装饰器标记了"name"和"age"属性。然后,我们使用@action装饰器定义了"updateName"和"updateAge"方法,用于更新属性的值。
接下来,我们创建了一个名为"UserComponent"的React组件,并使用@observer装饰器使其成为一个观察者。在组件的render方法中,我们访问了类对象的属性,并在需要时自动重新渲染。
这样,当调用"updateName"或"updateAge"方法来更新类对象的属性时,观察者将自动重新渲染,并显示更新后的值。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云