JIYIK CN >

Developers love the React framework because it allows you to create reusable components and use them when necessary. In a development build, components are split into many different files, so it is useful to know the conventions for importing and exporting them.

This article will explore the different ways to export components in React.

Export and Import statements allow React developers to split components into multiple files. Developers can also put multiple logically connected components in a single file if necessary.

The type of export statement affects the availability of the component in external files. exportThe statement makes live bindings from a specific file available everywhere else. Other files can importload the values ​​from these live bindings using the statement.

When importing a binding, you should remember that its source value can change at any time. If the value in the source file of the exporting module changes, it will be updated everywhere it is imported. By default, exportstatements automatically run according to strict mode rules.

We can generally distinguish two types of exports: named exports 命名and 默认named exports. Named exports can be used to export any number of bindings, or none at all. Default exports are more restrictive, as there can be only one export type per file.

There are syntactic differences between the two types of exports. We'll discuss them in detail in the following sections. The type of export also affects the syntax you need to use when importing.

Webpack and ES6 have simplified the process of importing and exporting files. However, some confusion about named exports still needs to be cleared up.

If you have multiple components in one file, you can use named exports. It might be better to use named exports to export multiple components (or other bindings) per file.

Furthermore, the syntax for named exports and imports is arguably more straightforward. When importing bindings exported in this way, you must use the same name as in the source file.

Let’s look at an example:

export function Greet() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}
export function Talk() {
  return (
    <div className="App">
      <h1>How are you?</h1>
    </div>
  );
}

We can import these components into another file using the following syntax:

import {Talk, Greet} from "./components/source.jsx"

This example specifies the path to the source file between strings. We also use the same binding names in the source file and put them between curly braces.

If you don't use the curly brace syntax, the documentation will interpret that you are trying to import 默认导出a binding with shared. You can't use the import 默认导出syntax to import 命名导出; you'll get an error.

If you think the binding name is unclear, you can rename it before exporting. In the example above, we can do this:

export {Greet as Greeting}

Most React applications follow the pattern of creating a separate file for each component. This convention makes default exports useful for exporting components.

Components exported this way are much easier to import. Since they are the only exports in the file, you can name them anything you want as long as you get the file path correct.

JavaScript will understand what file you're looking for. And you don't have to use curly braces. Let's look at this example:

export default function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}

If we want to import the App component, we just need to do this:

import Application from "./components/App.jsx"

We don't have to use curly braces and use the same binding name from the source file. We have the freedom to improvise. This way, the value will be renamed and in this file we can refer to it as Applicationinstead of App.

In the above example, we export defaultdefined the function component after the statement. We could also have defined it separately and referenced it in the statement.

For example:

function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}
export default App

For some people, this is a more readable approach. The only real disadvantage of default exports is that they can only be applied to one component per file.