关于import和export

总结了利用其他文件中描述的库和组件的import和export的方法，以便使其可以在其他文件中使用。

导入：使用方

整理几种基本的导入方法，以便使用在库或其他文件中定义的组件。

响应式库

import React from 'react';

在编写React组件时，一定需要。

ReactDOM库

import ReactDom from 'react-dom';

将React的虚拟DOM反映到浏览器的真实DOM中（即将React组件反映到HTML中）的库。基本上，只需要在被HTML引用的js文件或jsx文件中编写即可。

组件

import ComponentName from "componentsPath";
//または
import { ComponentName, ComponentName2 } from "componentsPath";

基本上，格式为从[导入文件路径]导入[要导入的组件名]。

关于使用中括号的问题

有时候，我们需要用大括号来包围导入的组件名称。组件的导出方式有两种：默认导出和命名导出，由此来决定是否使用大括号。

• デフォルトエクスポート：中括弧なし

名前付きエクスポート：中括弧あり

使用别名进行导入的方法

import * as name from 'componentPath';
import A as B from 'componentPath';

如果要使用别名导入整个组件文件：* as name
如果要使用别名导入组件文件的一部分：A as B

导出：被使用的一方

通过导出已创建的组件，以便可以从其他文件中使用。
导出方法有两种：无名称导出和有名称导出。

默认导出（无名称）

function ComponentName() {
	//コンポーネントの定義
}
export default ComponentName;

或者

export default function ComponentName() {
	//コンポーネントの定義
}

在export后面加上default可以进行导出。一个组件的文件中可以定义多个组件，但只能使用默认导出一个组件。

被命名为”エクスポート”(带有名称)

function ComponentName() {
	//コンポーネントの定義
}

function ConponentName2(){
	//コンポーネントの定義
}

export { ComponentName, ComponentName2 };

或者

export function ComponentName() {
	//コンポーネントの定義
}
export function ConponentName2(){
	//コンポーネントの定義
}

在命名为 “Named” 的 export 中，不要加上 default。
默认 export 只能有一个，但在这种情况下，可以导出多个。