美文网首页
create-react-app+MobX @observer

create-react-app+MobX @observer

作者: 天涯笑笑生 | 来源:发表于2018-07-09 14:49 被阅读0次

问题描述:
使用create-react-app+MobX,npm start,报错

问题截图

源码:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import {observable} from 'mobx';
import {observer} from 'mobx-react';

//1.定义状态
var appState = observable({
    timer: 0
});

//2.创建视图
@observer
class TimerView extends React.Component {
    render() {
        return (<button onClick={this.onReset.bind(this)}>
            Seconds passed: {this.props.appState.timer}
        </button>);
    }

    onReset () {
        this.props.appState.resetTimer();
    }
};

//3.更改状态
appState.resetTimer = () => {
    appState.timer = 0;
};

setInterval(()=>{
    appState.timer += 1;
}, 1000);

class App extends Component {
  render() {
    return (
      <div className="App">
          <TimerView appState={appState} />
      </div>
    );
  }
}

export default App;

问题原因:
create-react-app 没有内置的装饰器支持

解决方案:

  1. 因为ES.next 装饰器是可选的,所以最笨的就是不用
  2. 为create-react-app添加装饰器支持
    可以使用 eject 命令 或使用 react-app-rewired

相关文章

网友评论

      本文标题:create-react-app+MobX @observer

      本文链接:https://www.haomeiwen.com/subject/htxtpftx.html