Import von css-Dateien und Komponenten reagieren in einer create-reagieren-app-Anwendung?
Ich bin gerade erst mit react.js und erstellen-reagieren-app-Anwendung, so entschuldigen Sie mich, wenn dies eine offensichtliche Frage.
Meinen " src " Ordner-Struktur ist wie folgt:
scr/
....components/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES
In App.js ich habe diese:
import React, { Component } from 'react';
import ComponentA from './components/ComponentA';
class App extends Component {
render() {
return (
<div className="App">
<ComponentA />
</div>
);
}
}
export default App;
In ComponentA
habe ich dieses:
import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './components/ComponentB';
class ComponentA extends Component {
render() {
return (
<div className="componentAStyle">
<ComponentB />
</div>
);
}
}
export default ComponentA;
In ComponentB
habe ich dieses:
import React, { Component } from 'react';
class ComponentB extends Component {
render() {
return (
<div>
<h1>Hello from ComponentB</h1>
</div>
);
}
}
export default ComponentB;
Was ich versuche zu tun, ist einfach importieren Sie ComponentB
aus ComponentA
- und auch import-Stil für ComponentA
aber alle in diesem Herbst zeigt die folgende Meldung an:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './styles/ComponentA.css' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
Und wenn ich entfernen Sie die css-import es gibt eine andere Fehlermeldung:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './components/ComponentB' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
Wie kann ich importieren, die eine andere Komponente aus einer anderen Komponente und deren jeweilige css?
Dank.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie die Pfade, die Sie importieren, werden relativ zum aktuellen Speicherort der Datei den import.
Den richtigen Importe wäre
Komponente A
Können Sie sehen, dieses arbeiten an https://glitch.com/edit/#!/trashig-Einhorn.
(Klicken Sie auf Show Live in der linken oberen Ecke.)
Derzeit, was passiert mit Ihren Fehler ist
ist sucht im Pfad
existiert nicht und so gibt Sie einen Fehler aus. Dasselbe passiert mit Ihrem Arten.
Hoffe, das hilft.
import '../styles/ComponentA.css';
ging Es eine Ebene zurück und ging dann zu styles-Ordner. Sie können wieder zwei Ordner mit ".. / .. / " und so weiter. Sie müssen zu zählen, wie weit in die Tiefe, die Sie aus Ihren src-Ordner und dann halten das hinzufügen von '../'s, bis Sie dort ankommen.