Standardeinstellungen in React exportieren

Wir werden Arten von export in React vorstellen und was sie tun.

Arten von Exporten in React

Export wie export default ReactApp; und Import wie import logo from './logo.svg' ist Teil des ES6 Modulsystems.

Es gibt zwei Arten von Exporten in ES6: benannte Exporte und Standardexporte.

Benannte Exporte in React

Die Exporte, die unter Verwendung des Namens der Funktion exportiert werden, werden als benannte Exporte bezeichnet, z. B. export Function ExFunc(){}.

Benannte Module können mit import { ExFunc } from 'module'; importiert werden. Der Importname sollte gleich dem Namen des Exports sein, wie in diesem Beispiel ExFunc.

Wir können mehrere benannte Exporte in einem Modul haben.

Standardexporte in React

Der standardmäßige export wird verwendet, um eine einzelne Klasse, Primitive oder Funktion aus einem Modul zu exportieren. Es gibt verschiedene Möglichkeiten, den Standard export zu verwenden.

Normalerweise wird der Standard export nach der Funktion geschrieben, wie im Beispiel unten.

# react
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

Es kann aber auch wie folgt geschrieben werden.

# react
export default class ReactApp extends React.Component {
  render() {
    return <p>Exported Using Default Export</p>;
  }
}

Und für Funktionen kann es geschrieben werden als.

# react
export default function ReactApp() {
  return <p>Exported Using Default Export</p>
}

Sobald wir einen standardmäßigen export verwendet haben, müssen wir ihn nicht unbedingt als ReactApp importieren; wir können ihm einen beliebigen Namen geben.

# react
import Y from './ReactApp';

Y ist der Name, der lokal der Variablen gegeben wird, die den Wert enthalten soll, und es muss nicht der Ursprungsexport genannt werden.

Eine wichtige Sache, die man bei der Verwendung von default export beachten muss, ist, dass es nur einen default export geben kann, im Gegensatz zu named export. Ein Modul kann sowohl einen benannten Export als auch einen Standardexport haben, und sie können zusammen importiert werden.

# react
import Y, { ExFunc1, ExFunc2, etc... } from 'module';