javascript - mobx @inject 不创建新的(装饰的)组件

Question

我正在尝试使用 mobx 设置 React 应用程序进行状态管理。

我定义了一个像这样的商店:

ApplicationStore.js

import { observable, action, reaction } from 'mobx';

class ApplicationStore {

  @observable appName = 'App';
  @observable currentRoute = '/';
  @observable appLoaded = false;

  @action setAppLoaded() {
      this.appLoaded = true;
  }
}

export default new ApplicationStore();

在Root.js中使用它收集存储/调试工具并将其传递给主应用程序组件:

Root.js

import React, { Component } from 'react';

import { Provider } from 'mobx-react';

import App from './App.js';

import './Root.css';

import ApplicationStore from './stores/ApplicationStore';

const stores = { ApplicationStore }

class Root extends Component {
  render() {
    return (
      <Provider {...stores}>
        <App />
      </Provider>
    );
  }
}

export default Root;

App.js

import React, { Component } from 'react';

import Login from './views/login/Login'
import Dashboard from './views/dashboard/Dashboard'

import { observer, inject } from 'mobx-react';

import { Switch, Route, BrowserRouter, Redirect } from 'react-router-dom'

@inject('ApplicationStore')
@observer
class App extends Component {

    componentDidMount() {
        console.log(this.props)
    };

   render() {

    var loggedIn = false;        

    return (
      <div className="App">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" render={() => (
              loggedIn ? (
                <Redirect to="/dashboard" />
              ) : (
                <Redirect to="/login" />
              )
              )} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/dashboard" component={Dashboard} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

console.log(this.props)在componentDidMount()显示有空 Prop 。

不仅如此，检查<Provider> React-dev-tools 中的子项显示 @inject没有创建新组件(它显示 <App> 而不是预期的 <inject-App-with-ApplicationStore> 。

我不明白

Answer 1

问题出在 babel 配置上。我正在使用 react-app-rewired 方法将装饰器功能添加到 create-react-app which can be seen here...

在 config-overrides.js 文件中我有:

const { injectBabelPlugin } = require("react-app-rewired");

module.exports = function override(config, env) {

    config = injectBabelPlugin(['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: false}], config);

    return config;
} 

我把它改为:

...
     config = injectBabelPlugin(['@babel/plugin-proposal-decorators', {"legacy": true}], config);
...

现在它正在按预期工作。