在 React 中导出默认值

我们将介绍 React 中的 export 类型以及它们的作用。

React 中的导出类型

像 export default ReactApp; 一样导出和 import like import logo from './logo.svg' 是 ES6 模块系统的一部分。

ES6 中有两种导出：命名导出和默认导出。

React 中的命名导出

使用函数名称导出的导出称为命名导出，例如 export Function ExFunc(){}。

可以使用 import { ExFunc } from 'module'; 导入命名模块。导入名称应与导出名称相同，如本例中的 ExFunc。

我们可以在一个模块中有多个命名的 exports。

React 中的默认导出

默认 export 用于从模块中导出单个类、原语或函数。有不同的方法可以使用默认的 export。

通常，默认的 export 写在函数之后，如下例所示。

# react
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

但也可以像下面这样写。

# react
export default class ReactApp extends React.Component {
  render() {
    return <p>Exported Using Default Export</p>;
  }
}

而对于函数，它可以写成。

# react
export default function ReactApp() {
  return <p>Exported Using Default Export</p>
}

一旦我们使用了默认的 export，我们不一定需要将其作为 ReactApp 导入；我们可以给它起任何名字。

# react
import Y from './ReactApp';

Y 是本地分配给包含该值的变量的名称，不必将其命名为原始导出。

使用默认导出时要记住的一件重要事情是，与命名导出不同，只能有一个默认导出。一个模块可以同时命名为 export 和一个默认 export，它们可以一起导入。

# react
import Y, { ExFunc1, ExFunc2, etc... } from 'module';