关于react.js:React技巧之导入组件

在 React 中，从其余文件中导入组件：

从 A 文件中导出组件。比如说，export function Button() {}。
在 B 文件中导入组件。比如说，import {Button} from './another-file'。
在 B 文件中应用导入的组件。

上面的例子是从一个名为 another-file.js 的文件中导入组件。

// 👇️ named export
export function BigButton() {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

// 👇️ named export
export const SmallButton = () => {
  return (<button onClick={() => console.log('small button')}>Small button</button>
  );
};

上面是咱们如何从一个名为 App.js 文件中导入组件。

// 👇️ named import
import {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 export
export 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 export
export default BigButton;

上面是如何应用默认导入来导入组件。

// 👇️ default import
import BigButton from './another-file';

export default function App() {
  return (
    <div>
      <BigButton />
    </div>
  );
}

当导入组件时，咱们也能够应用不同的名字，比方Foo。

// 👇️ default import
import Foo from './another-file';

export default function App() {
  return (
    <div>
      <Foo />
    </div>
  );
}

这样也会失效，但会令人纳闷，因而应该防止。

依据我的教训，大多数事实世界的代码库只应用命名的导出和导入，因为它们更容易利用你的 IDE 进行主动实现和主动导入。你也不用思考哪些成员是用默认导出或命名导出的。

你也能够混合匹配，上面示例的文件应用了默认导出和命名导出。

// 👇️ default export
export default function BigButton() {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

// 👇️ named export
export const SmallButton = () => {
  return (<button onClick={() => console.log('small button')}>Small button</button>
  );
};

上面是如何导入这两个组件。

// 👇️ default and named imports
import BigButton, {SmallButton} from './another-file';

export default function App() {
  return (
    <div>
      <BigButton />

      <hr />

      <SmallButton />
    </div>
  );
}

咱们应用默认导入来导入 BigButton 组件，应用命名导入来导入 SmallButton 组件。

请留神，每个文件只能有一个默认导出，但你能够依据须要有多个命名导出。

关于react.js:React技巧之导入组件

总览

命名导入导出

默认导入导出

混合导入导出