export default两个组件
时间: 2023-06-18 11:02:23 浏览: 36
在 React 中,可以使用 `export default` 导出一个组件。例如,我们有两个组件 `ComponentA` 和 `ComponentB`,可以在组件文件中这样导出它们:
```
// ComponentA.js
import React from 'react';
const ComponentA = () => {
return (
<div>
<h1>Component A</h1>
</div>
);
}
export default ComponentA;
```
```
// ComponentB.js
import React from 'react';
const ComponentB = () => {
return (
<div>
<h1>Component B</h1>
</div>
);
}
export default ComponentB;
```
可以看到,我们在组件定义之后使用 `export default` 导出组件。这样,在其他文件中就可以使用 `import` 语句导入这些组件:
```
// App.js
import React from 'react';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
const App = () => {
return (
<div>
<ComponentA />
<ComponentB />
</div>
);
}
export default App;
```
这样,我们就可以在 `App` 组件中使用 `ComponentA` 和 `ComponentB` 组件了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)