React 组件声明中“导出"的目的是什么? [英] What is the purpose of 'export' in React component declaration?

问题描述

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

class Hello 扩展 React.Component { ... }

有时这个?

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

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

任何有关这方面的信息将不胜感激，在此先感谢.

<小时>

更新:

ma​​in-file.js

从'react'导入反应；从 'react-dom' 导入 ReactDOM；从'./external'导入{外部}；类 Hello 扩展 React.Component {使成为() {返回 
<h1>Hello World(这次是主文件)</h1><外部/></div>}}ReactDOM.render(<Hello/>, document.getElementById('main'));

external.js(同一目录)

export class External extends React.Component {使成为() {return <div>这是我的外部组件</div>}}

这不起作用 - 你知道为什么吗??

解决方案

在解释 export 关键字之前，让我给你澄清一些事情.

<小时>

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

1/通天塔

2/webpack 或 browserify

说明

什么是 Babel 工作?

您可能听说过 jsx 和 ES6.

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

export 关键字是 ES6 中的一项新功能，让您可以导出您的 functions、variables 以便您可以在其他 中访问它们>js 文件.

即:

hello.js

export default class Hello extends React.Component {使成为() {return <div>你好</div>}}

world.js

import { Hello } from './hello';类 World 扩展 React.Component {使成为() {返回<div><你好/>世界</div>;//jsx sytanx.}}

什么是 webpack 作业?

Webpack 是一个模块打包器.它接收一堆资产(即hello.js、world.js 和你的模块(react、react-dom....))并将其转化为一个文件.

即:

假设我们有以下 webpack

的配置

//不需要将 hello.js 设置为条目，因为我们已经将其导入 world.js模块.exports = {入口: ['./src/world.js'],输出: {路径:__dirname，公共路径:'/'，文件名:'bundle.js'}};

webpack 它将你所有的 js 文件和你的模块导入到一个单一的文件中 bundle.js.

解决问题

在jsx中，

始终将返回的 html 包装到 () 中.

<代码>...使成为() {返回 (
<h1>Hello World(这次是主文件)</h1><外部/></div>)}...

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

class Hello extends React.Component { ... }

and sometimes this?

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

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

Any info on this would be appreciated, thanks in advance.

---

UPDATE:

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 (same directory)

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

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

解决方案

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

---

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

1/ Babel

2/ webpack or browserify

Explaination

What is Babel job?

You might heard of jsx and ES6.

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

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

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.

i.e:

let say that we have the following config for 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 it turn all of your js files and your modules wich imported and it turn it into onne single file bundle.js.

Edit: Solving the problem

In jsx,

always wrap the returned html into ().

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

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