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;

componentDidMount() 中的console.log(this.props) 表示有空道具。

不仅如此，在 React-dev-tools 中检查 <Provider> 的子组件表明 @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);
...

它现在按预期工作。