释

Question

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

class Hello extends React.Component { ... }

有时候这个？

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

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

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

更新：

主要-file.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'));

external.js （同一目录）

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

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

Answer 1

在解释export关键字之前，请告诉我一些事情。

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

1 / Babel

2 / webpack 或 browserify

释

什么是巴别塔工作？

您可能会听到jsx和ES6。

Babel的工作是jsx到js和ES6到ES5的透明度，这样浏览器就能理解这两件事。

和export关键字是ES6中的新功能，导出functions，variables，以便您可以在其他js个文件中访问它们

即：

<强> hello.js

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

<强> world.js

import { Hello } from './hello';

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

什么是webpack工作？

Webpack是一个模块捆绑器。它接受了大量资产（即。hello.js，world.js和您的模块（反应，反应......））并将其转换为单个文件。

i.e:

假设我们有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';

如果您的模块只导出一个值，通常您会想要使用此表单。

React组件声明中“导出”的目的是什么？

2 个答案:

释

什么是巴别塔工作？

什么是webpack工作？