Globale Variablen in ReactJS

Question

Wir arbeiten gerade an einem Schulprojekt und haben einen Teil der App, der irgendwie "extern" ist. (Wird nur zum Anzeigen eines Graphen verwendet) Der/graph-Ordner befindet sich jetzt im Ordner/src, und beim Kompilieren der react-App erhalten wir Tonnen von Importfehlern. Gibt es eine Möglichkeit, diese Importe zu umgehen und nur die globalen Variablen zu verwenden, die bereits implementiert sind?

Answer 1

Globale Variablen in React können mit der Datei webpack.config.js implementiert werden.

In der Webpack-Konfigurationsdatei deklarieren Sie Ihre globale Variable.

d. H. const API_URL = JSON.stringify('http://api:8080'); Außerdem müssen Sie dem Webpack neue Plugins hinzufügen, damit diese globale Variable für Ihre gesamte App zugänglich ist.

new webpack.DefinePlugin({ //defining gloabl variable 
     API_URL, 
}); 

Aber globale Variable zur Seite, wenn nur der Komponente und Modul Import Fehler loswerden wollen, dann können Sie einfach festlegen Aliasnamen für die in Ihrer .babelrc Datei. Auf diese Weise müssen Sie nicht '../../..something' schreiben, Sie können einfach 'something' schreiben.

{ 
"presets": ["react", "es2015", "stage-0"], 

"plugins": [ 
    ["module-resolver", { 
     "root": ["./src"], 
     "alias": { 
     "src": "/", 
     "components": "/components", 
     "actions": "/actions", 
     "containers": "/containers", 
     "images": "/images", 
     "reducers": "/reducers", 
     "styles": "/styles", 
     "utils": "/utils", 
     } 
    }] 
] 
}} 

Dies ist ein Beispiel .babelrc Datei mit Alias ​​für Komponenten und andere Ordner. Jetzt von wo in der App, wenn ich import { Something } from 'components/Something' schreibe, wird meine App wissen, wo es zu finden ist. Keine Notwendigkeit '../../../components/Something'

Answer 2

Es wird nicht empfohlen, globale Variablen zu verwenden, aber Sie können einfach window-Objekt verwenden, um Variablen zu speichern, zum Beispiel window.myGlobalVar = 3. Zusätzlich können Sie den reac-Kontext verwenden.

Answer 3

schreiben Sie können dies versuchen:

Parent.js

var myVar = {} 

class MyComponent extends Component { 

... 
... 
myVar = new Object(); 
... 
... 
render() { 
    return <div> 
       \\ children 
       <MyLeftBranch myVar={myVar} /> 
       <MyRightBranch myVar={myVar} /> 
       </div> 
} 
} 

export default MyComponent; 

child.js

class Child extends Component { 
    { myVar } = this.props; 
    \\use myVar 
}