You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: beta/src/pages/learn/importing-and-exporting-components.md
+72-69Lines changed: 72 additions & 69 deletions
Original file line number
Diff line number
Diff line change
@@ -1,26 +1,29 @@
1
1
---
2
-
title: Importing and Exporting Components
2
+
title: 组件的导入与导出
3
+
translators:
4
+
- Alienover
5
+
- QC-L
3
6
---
4
7
5
8
<Intro>
6
9
7
-
The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.
These currently live in a **root component file,**named `App.js`in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery`and`Profile`out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
2.**Export**your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export)or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
63
-
3.**Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults)or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
Here both `Profile`and`Gallery`have been moved out of `App.js`into a new file called `Gallery.js`. Now you can change `App.js`to import `Gallery` from`Gallery.js`:
Notice how this example is broken down into two component files now:
110
+
该示例中需要注意的是，如何将组件拆分成两个文件：
108
111
109
112
1.`Gallery.js`:
110
-
-Defines the `Profile`component which is only used within the same file and is not exported.
111
-
-Exports the `Gallery`component as a **default export**.
113
+
-定义了 `Profile`组件，该组件仅在该文件内使用，没有被导出。
114
+
-使用 **默认导出** 的方式，将 `Gallery`组件导出
112
115
2.`App.js`:
113
-
-Imports `Gallery` as a **default import**from`Gallery.js`.
114
-
-Exports the root`App`component as a **default export**.
116
+
-使用 **默认导入**的方式，从`Gallery.js` 中导入 `Gallery` 组件。
117
+
-使用 **默认导出** 的方式，将根组件`App`导出。
115
118
116
119
117
120
<Note>
118
121
119
-
You may encounter files that leave off the `.js`file extension like so:
122
+
引入过程中，你可能会遇到一些文件并未添加 `.js`文件后缀，如下所示：
120
123
121
124
```js
122
125
importGalleryfrom'./Gallery';
123
126
```
124
127
125
-
Either`'./Gallery.js'`or`'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
128
+
无论是`'./Gallery.js'`还是`'./Gallery'`，在 React 里都能正常使用，只是前者更符合 [原生 ES 模块](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules)。
126
129
127
130
</Note>
128
131
129
-
<DeepDivetitle="Default vs Named Exports">
132
+
<DeepDivetitle="默认导出 vs 具名导出">
130
133
131
-
There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
134
137
135
-
How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
|Default|`export default function Button() {}`|`import Button from './button.js';`|
140
-
|Named |`export function Button() {}`|`import { Button } from './button.js';`|
140
+
|语法|导出语句 | 导入语句|
141
+
| ----------- | ----------- | ----------- |
142
+
|默认|`export default function Button() {}`|`import Button from './button.js';`|
143
+
|具名|`export function Button() {}`|`import { Button } from './button.js';`|
141
144
142
-
When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
145
+
当使用默认导入时，你可以在 `import` 语句后面进行任意命名。比如 `import Banana from './button.js'`，如此你能获得与默认导出一致的内容。相反，对于具名导入，导入和导出的名字必须一致。这也是为什么称其为 _具名_ 导入的原因！
143
146
144
-
**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
What if you want to show just one `Profile`instead of a gallery? You can export the `Profile`component, too. But `Gallery.js`already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
> To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. It's a matter of preference. Do what works best for you!
Finally, **render**`<Profile />` from the `App` component:
171
+
最后，在 `App` 组件里 **渲染**`<Profile />`：
169
172
170
173
```js
171
174
exportdefaultfunctionApp() {
172
175
return<Profile />;
173
176
}
174
177
```
175
178
176
-
Now `Gallery.js`contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js`imports both of them. Try editing `<Profile />`to`<Gallery />` and back in this example:
You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js`and`Gallery.js`! You can refer to the table from the deep dive above:
0 commit comments