mobx使用时取不到class的静态属性

Question

题目描述

this.props.name不显示，但是onclick触发的事件是有效的会将name的值变成‘ls'

写成class类取不到

import {observable,action,computed} from 'mobx'
class TodoList {
    @observable name = 'hi'
    @action change(){
        console.log('change')
        this.name = 'ls'
    }
}

export default new TodoList()

问题：P标签取不到值

@observer
class App extends React.Component {

  render() {
    return (
        <p>{this.props.todoList.name}</p> //这里取不到值不显示
   
    )
  }
}

export default App;

但是如果TodoList这样写,p标签就可以取到值

export default new TodoList('zs')

let TodoList = observable({
    name :'hi',
    change(){
        this.name = 'ls'
    }
})

export default TodoList

Answer 1

1.先排除是不是decorator是否生效
2.如果生效，你需要把todoList当成一个属性传入进去

Answer 2

终于解决了，在package.json里面添加plugins配置（用的是create-react-app创建的项目）

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [// 添加
      "babel-plugin-transform-decorators-legacy"// 添加
    ]
  },

Answer 3

el": {

"presets": [
  "react-app"
],
"plugins": [// 添加
  "babel-plugin-transform-decorators-legacy"// 添加
]