Невозможно сделать класс наблюдателем MOBX без поддержки декоратора - «TypeError не может прочитать свойство« наблюдатель »из неопределенного»

Question

Вот файл index.js

import React from "react";
import ReactDOM from "react-dom";
import mobx, { observable, action, decorate } from "mobx";
import mobxReact from "mobx-react";

import "./styles.css";

const Main = mobxReact.observer(
  class Main extends React.Component {
    // @observable internalState = false;
    constructor(props) {
      super(props);
      this.internalState = false;
    }

    toggleMenu = () => {
      console.log("Toggle button");
      this.internalState = !this.internalState;
    };

    render() {
      return (
        <div className="App">
          <h1>Toggle State</h1>
          <input type="button" onClick={this.toggleMenu} value="Toggle" />
          <div style={{ paddingTop: "25px" }}>
            internalState {this.internalState.toString()}{" "}
          </div>
        </div>
      );
    }
  }
);

decorate(Main, {
  internalState: observable,
  toggleMenu: action
});

function App() {
  return <Main />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вот ссылка на код codesandbox: https://codesandbox.io/s/k37v35vylv

Поскольку шаблон этого codesandbox не поддерживаетСинтаксис decorator, я пытаюсь сделать класс Main observer без @observer.

Я получаю эту ошибку:

Текст ошибки:

TypeError: Cannot read property 'observer' of undefined

Зависимости:

Answer 1

В пакете mobx-реагировать экспорт по умолчанию отсутствует.Поэтому я предлагаю вам написать такой код: import {observer} from 'mobx-react'