reactjs mobx ohne Dekorierer funktioniert nicht

Question

Ich versuche mobx mit react zu integrieren. Da ich meine Anwendung unter Verwendung von create-react-app erstellt habe, kann ich keine von mobx angegebenen Dekoratoren verwenden.

Da wir mobx ohne Dekorateure gemäß dieser Dokumentation verwenden: https://mobxjs.github.io/mobx/best/decorators.html

Hier ist eine Komponente, die ich erstellt:

import React, { Component } from 'react'; 
import observer from 'mobx-react'; 

export const TestComponent = observer(class TestComponent extends Component { 

    render() { 
    return <div>Just a test component!</div> 
    } 

}); 

Hier ist ein einfacher Aufruf der obigen Komponente:

import React, { Component } from 'react'; 

import './App.css'; 

import Auth from './Auth' 
import { TestComponent } from './Test' 

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 

import AppBar from 'material-ui/AppBar'; 
import authStore from './stores/Store' 

class App extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
     } 
    } 

    render() { 
    return (
     <div className="app"> 
      <MuiThemeProvider> 
       <div> 
        <TestComponent store={authStore} /> 
       </div> 
      </MuiThemeProvider> 
     </div> 

    ); 
    } 
} 

export default App; 

Jetzt, wenn ich die obige Komponente ausführen, erhalte ich Fehler: Uncaught TypeError: (0 , _mobxReact2.default) is not a function(…) nichts Anzeigen in der Konsole.

Was mache ich hier falsch?

Answer 1

Bitte verwenden import {observer} from 'mobx-react';

N. B. Beachten Sie, dass Dekoratoren mit create-react-app verwendet werden können, indem Sie custom-react-scripts verwenden, wie erläutert here)