总览
在React中，从其余文件中导入组件：
- 从
A文件中导出组件。比如说，export function Button() {}。 - 在
B文件中导入组件。比如说，import {Button} from './another-file'。 - 在
B文件中应用导入的组件。
命名导入导出
上面的例子是从一个名为another-file.js的文件中导入组件。
// ️ named exportexport function BigButton() { return ( <button style={{padding: '2rem 1rem'}} onClick={() => console.log('big button')} > Big button </button> );}// ️ named exportexport const SmallButton = () => { return ( <button onClick={() => console.log('small button')}>Small button</button> );};上面是咱们如何从一个名为App.js文件中导入组件。
// ️ named importimport {BigButton, SmallButton} from './another-file';export default function App() { return ( <div> <BigButton /> <hr /> <SmallButton /> </div> );}如有必要，请确保以后门路指向another-file.js模块。下面的例子假如another-file.js和App.js位于雷同的目录下。
举例来说，如果another-file.js位于下层目录，你必须这样导入：import {BigButton} from '../another-file' 。
在导入组件时，咱们应用大括号包裹组件名称。这被称为命名导入。
import/export语法被称为JavaScript模块。为了可能从不同的文件中导入一个组件，必须应用命名的或默认的导出形式将其导出。上述例子应用了命名导出和导入。
命名和默认导入导出的次要不同之处在于，在每个文件中，你能够有多个命名导出，但只能有一个默认导出。
默认导入导出
让咱们看一个例子，看看咱们如何导入一个应用默认导出的组件。
// ️ default exportexport default function BigButton() { return ( <button style={{padding: '2rem 1rem'}} onClick={() => console.log('big button')} > Big button </button> );}很重要：如果你导出一个变量（或者箭头函数）作为默认导出，你必须先申明再导出。你不能在同一行内申明变量同时默认导出变量。
const BigButton = () => { return ( <button style={{padding: '2rem 1rem'}} onClick={() => console.log('big button')} > Big button </button> );}// ️ default exportexport default BigButton;上面是如何应用默认导入来导入组件。
// ️ default importimport BigButton from './another-file';export default function App() { return ( <div> <BigButton /> </div> );}当导入组件时，咱们也能够应用不同的名字，比方Foo。
// ️ default importimport Foo from './another-file';export default function App() { return ( <div> <Foo /> </div> );}这样也会失效，但会令人纳闷，因而应该防止。
依据我的教训，大多数事实世界的代码库只应用命名的导出和导入，因为它们更容易利用你的IDE进行主动实现和主动导入。 你也不用思考哪些成员是用默认导出或命名导出的。
混合导入导出
你也能够混合匹配，上面示例的文件应用了默认导出和命名导出。
// ️ default exportexport default function BigButton() { return ( <button style={{padding: '2rem 1rem'}} onClick={() => console.log('big button')} > Big button </button> );}// ️ named exportexport const SmallButton = () => { return ( <button onClick={() => console.log('small button')}>Small button</button> );};上面是如何导入这两个组件。
// ️ default and named importsimport BigButton, {SmallButton} from './another-file';export default function App() { return ( <div> <BigButton /> <hr /> <SmallButton /> </div> );}咱们应用默认导入来导入BigButton组件，应用命名导入来导入SmallButton组件。
请留神，每个文件只能有一个默认导出，但你能够依据须要有多个命名导出。