在 React 组件声明中'export'的目的是什么？

Question

在 React （ES6） 中，为什么我有时会看到这个?...

class Hello extends React.Component { ... }

有时这个？

export class Hello extends React.Component { ... }

export关键字的意义是什么？如果使用 webpack，这是否需要对 webpack.config.js 文件进行任何更改？

有关这方面的任何信息将不胜感激，提前感谢。

---

更新：

主文件.js

import React from 'react';
import ReactDOM from 'react-dom';
import { External } from './external';
class Hello extends React.Component {
  render() {
    return <div>
      <h1>Hello World (Main File this time)</h1>
      <External />
    </div>
  }
}
ReactDOM.render(<Hello/>, document.getElementById('main'));

外部.js（同一目录）

export class External extends React.Component {
  render() {
    return <div>This is my external component</div>
  }
}

这不起作用 - 你能明白为什么吗？

Answer 1

在解释export关键字之前，让我向您澄清一些事情。

---

正如您在互联网上看到的那样，在每个 react 应用程序中，您都需要使用两个重要的东西：

1/通天塔

2/网络包或浏览器化

解释

什么是通天塔工作？

你可能听说过jsx和ES6。

好吧，Babel 的工作是将jsx转译为 js，将 ES6 转译为 ES5，以便浏览器可以理解这两件事。

export关键字是ES6中的一项新功能，让我们导出您的functions，variables这样您就可以在其他js文件中访问它们。

即：

你好.js

export default class Hello extends React.Component {
  render() {
    return <div>Hello</div>
  }
}

世界.js

import { Hello } from './hello';
class World extends React.Component {
  render() {
    return <div><Hello /> world</div>; // jsx sytanx.
  }
}

什么是 webpack job？

Webpack 是一个模块捆绑器。它接受一堆资产（即。 hello.js，world.js和你的模块（反应，反应多姆....））并将其转换为一个文件。

即：

假设我们有以下配置用于webpack

// dont need to set hello.js as an entry because we already import it into world.js
module.exports = {
  entry: [
    './src/world.js'  
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  }
};

webpack 它会将您的所有 js 文件和导入的模块转换为 onne 单个文件bundle.js。

编辑：解决问题

在jsx，

始终将返回的 HTML 包装到 () 中。

...
render() {
  return (
    <div>
      <h1>Hello World (Main File this time)</h1>
      <External />
    </div>
  )
}
...

Answer 2

导出值允许您将其导入到另一个文件中。

如果我从hello.js文件中导出此类：

// hello.js
export class Hello extends React.Component { ... }

然后我可以导入它并在greeting.js文件中使用它。

// greeting.js
import { Hello } from './hello';
export class Greeting extends React.Component {
  render() {
    return <Hello />;
  }
}

这不是特定于 React 的，您可以使用此语法在任何类型的 JavaScript 应用程序中导入和导出任何类型的值。

在使用像 Babel 这样的工具将其转换为可以在浏览器中运行的代码后，您可以使用像 Webpack 这样的工具将您使用过的所有模块捆绑到一个可以为浏览器提供的脚本文件中。

此用于导入和导出的模块语法还为导出"默认"值的模块提供了有用的简写。

// hello.js
export default class Hello extends React.Component { ... }
// greeting.js
import Hello from './hello';

通常，如果模块仅导出一个值，则需要使用此窗体。