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

问题描述

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

In React (ES6), why do I sometimes see this?...

class Hello extends React.Component { ... }

有时是 this ？

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

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

What is the significance of the export keyword? If using webpack, would this require any changes to the webpack.config.js file?

对此表示感谢，谢谢。

更新：

main-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>
  }
}

这不起作用-您知道为什么吗？ ？

This doesn't work - can you see why??

推荐答案

在解释 export 关键字之前，让我为您清除一些内容

Before explain the export keyword let me clear something to you.

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

As you have seen around the internet, in every react application you need to use two important things:

1 /

2 / 或

您可能听说过 jsx 和 ES6 。

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

Well, Babel job is Transpile the jsx to js and ES6 to ES5 so the browser can understand these two things.

和 export 关键字是ES6中的新功能，让我们导出您的函数，变量，因此您可以在其他 js 文件中访问它们。

And export keyword is a new feature in ES6 let export your functions, variables so you can get access to them in other js files.

ie：

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 和您的模块（反应，反应-dom ....）），然后将其转换为一个文件。

What is webpack job?

Webpack is a module bundler. It takes in a bunch of assets (ie. hello.js, world.js and your modules (react, react-dom....)) and turns that into one single file.

即：

说我们为 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 。

webpack it turn all of your js files and your modules wich imported and it turn it into onne single file bundle.js.

编辑：解决问题

在 jsx 中，

始终将返回的html包装到<$ c $中c>（）。

always wrap the returned html into ().

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

这篇关于React组件声明中“导出”的目的是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！