mobx装饰者不能与Typescript一起工作

我刚开始开发一个新项目，在这个项目中，我使用mobx作为反应网络应用程序和react-native移动应用程序之间的共享状态管理核心模块。mobx装饰者不能与Typescript一起工作

核心模块使用typescript，它被两个应用程序项目编译和使用。

我的问题是当商店中的@observable属性（来自核心模块）发生更改时，两个项目中的组件均不重新渲染。

当我在每个项目中使用相同的定义和逻辑创建存储时，组件将按预期进行重新呈现。我还将核心模块的一部分转换为使用babel-cli转换的javascript ES6，并且它也按预期工作。

我认为这个问题与从Typescript编译进入非打字稿项目的商店有关，但我无法克服它！

附加信息：

的.ts存储文件：

import { observable, action } from 'mobx' 

export class UserStore { 
    @observable loading = false; 

    @action login() { 
     this.loading = true; 
     setTimeout(() => {this.loading = false},1000) 
    } 
} 
export const userStore = new UserStore();

的.tsconfig文件：

{"compilerOptions": { 
    "lib": ["es6", "dom", "es2015"], 
    "module": "commonjs", 
    "target": "es5", 
    "moduleResolution": "node", 
    "declaration": false, 
    "outDir": "lib", 
    "experimentalDecorators": true 
    }, 
    "include": ["index.ts", "src" ]}

打字稿版本：2.4.1

所有项目中使用最新的mobx和mobx-react版本。

这两个反应和反应，本地项目使用常规巴贝尔。

消耗店的成分（我有一个Provider配置..）：

@inject('userStore') 
@observer 
class Loading extends Component { 

    componentWillMount() { 
    this.props.userStore.login(); 
    } 

    render() { 
    return (
     this.props.userStore.loading ? <div>loading...</div> : <div>loaded...</div> 
) }}

来源

2017-07-04 naomi

你可以尝试，当你将其设置为一个新值，使用'mobx.useStrict'，以确保你没有可观察的价值进行重新写一个简单的值。 –

这里同样的问题。你解决了吗？ –

@BrickYang在此问题上查看适用于我的解决方案：https：//github.com/mobxjs/mobx/issues/1071 – naomi

-2

而不是@inject('userStore')只需使用import {userStore} from "./foo/userStore"。

简而言之：

@observer 
class Loading extends Component { 

    componentWillMount() { 
    userStore.login(); 
    } 

    render() { 
    return (
     userStore.loading ? <div>loading...</div> : <div>loaded...</div> 
) }}

来源

2017-07-04 06:41:36 basarat

mobx装饰者不能与Typescript一起工作

回答

相关问题