反应JS |导入和导出

到目前为止，我们已经了解到 React 应用程序基本上是一个交互式组件的集合，并且从文章中，关于 ReactJS 组件，我们已经知道如何创建组件，但是即使有了这些知识，也不足以创建一个成熟的 React 应用程序因为为了创建组件集合，我们首先需要知道使用和重用可能在其他地方定义的组件的方式。为此，我们需要了解两种广泛称为导入和导出的操作。
我们之前可能没有告诉过，但是在我们之前的每一篇文章中，当我们导入 react 和 react-dom 本身时，我们一直在使用 import 操作。同样，我们也可以导入用户定义的类、组件，甚至是相同的一部分。让我们将讨论转移到导入上。

输入

Javascript 的世界一直在变化，最新的 ES2015 之一现在提供了更高级的模块导入/导出模式。在以前的引擎中，开发人员必须使用module.exports = { // 在此处定义您的导出。 } ，但是现在在 ES2015 中，每个模块都可以有一个默认导出或可以导出多个命名参数，如果可以导出，那么肯定可以导入相同的。因此，对于 ES2015，每个模块都可以导入默认导出或多个命名参数，甚至是有效组合。
React 使用与上述相同的功能，您可以将每个 React 组件视为一个模块本身。因此，可以导入/导出 React 组件，并且是要执行的基本操作之一。在 React 中，我们使用关键字import和from来导入特定模块或命名参数。现在让我们看看我们可以在 React 中使用导入操作的不同方式。

• 导入默认导出：据说每个模块最多有一个默认导出。为了从文件中导入默认导出，我们可以只使用地址并在其前面使用关键字import，或者我们可以为导入命名，语法如下。
  

import GIVEN_NAME from ADDRESS

• 导入命名值：每个模块可以有多个命名参数，为了导入一个，我们应该使用如下语法。
  

import { PARA_NAME } from ADDRESS

• 同样，对于多个此类导入，我们可以使用逗号分隔花括号内的两个参数名称。
• 导入默认导出和命名值的组合：标题清楚地表明我们需要看到的是相同的语法。为了导入组合，我们应该使用以下语法。
  

import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS

出口

现在，导入是需要模块权限的操作。仅当要导入的模块或命名属性已在其声明中导出时，才能进行导入。在 React 中，我们使用关键字export来导出特定模块或命名参数或组合。现在让我们看看我们可以在 React 中使用导入操作的不同方式。

• 导出默认导出：我们已经了解到，据说每个模块最多有一个默认导出。为了从文件中导出默认导出，我们需要遵循下面描述的语法。
  

export default GIVEN_NAME

• 导出命名值：每个模块都可以有多个命名参数，为了导出一个，我们应该使用如下语法。
  

export { PARA_NAME }

• 同样，对于多个此类导出，我们可以使用逗号分隔花括号内的两个参数名称。

让我们在下面的示例中看到它，我们将以多种方式使用导入和导出操作。假设有两个文件，一个index.js ，另一个change-color.js 。让我们看看如何实现导入和导出操作。

这是index.js文件：

javascript

// Importing combination
import React, {Component} from 'react';
// Importing Module
import ReactDOM from 'react-dom';
import ChangeColor from './change-color.js';
// Importing CSS
import './index.css';
 
class App extends Component {
    render()
    {
        return (
Welcome to
        
);
    }
}
 
ReactDOM.render(
  ,
  document.getElementById('root')
);

这是change-color.js文件：

javascript

// Importing combination
import React, {Component} from 'react';
 
class ChangeColor extends Component {
    constructor(props)
    {
        super(props);
        this.state = { color : '#4cb96b' };
    }
 
    getClick()
    {
        if (this.state.color === '#4cb96b')
            this.setState({ color : '#aaa' });
        else
            this.setState({ color : '#4cb96b' });
    }
 
    render()
    {
        return 

               {this.props.title} < /h1>
  }
} 
 
// Exporting the component
export default ChangeColor;

输出：

上面的代码生成以下应用程序，单击“GeeksforGeeks”会更改它的文本颜色。如下图所示。
现在显然我们已经完成了创建我们自己的基本但可呈现的应用程序的所有基本要求。请继续关注为自己创建一个。