Reagieren RTL. Conditional Import CSS

Question

Ich nehme RTL in meine React-Anwendung auf. Ich habe zwei CSS-Dateien, eine für LTR und eine für RTL. Ich habe ein Drop-Down-Fenster, in dem der Benutzer entweder die englische oder die arabische Version auswählt.

Ich bin fest, dass wie bedingte importieren meine RTL CSS-Datei, wenn Benutzer arabische Version und zurück zu normalen CSS-Datei wählen, wenn Benutzer Englisch auswählen.

Jede Hilfe oder Anleitung zu diesem Thema wird sehr

geschätzt werden ich mit & webpack

Grüße Reagieren bin

Answer 1

ich dieses Problem vor konfrontiert, was ich getan haben, ist, dass, wenn mein Hauptbehälter Ich moechte, suche nach der Sprache, wenn es Arabisch ist, brauche ich die arabische CSS-Datei, wenn nicht, brauche ich die andere.

Beispiel:

class Main extends Component { 
    componentWillMount() { 
     if(this.props.language === 'ar') { 
      require('arabic.css'); 
     } else { 
      require('english.css'); 
     } 
    } 
} 

Ich verwende Redux als auch, was macht es einfacher für mich, die Anfangs- oder Standardsprache zu erhalten, und alle anderen Komponenten entsprechend auch ändern.

Stellen Sie sicher, dass Sie den CSS-Loader in Ihrer Webpack-Konfigurationsdatei konfiguriert haben.