React export和export default的区别

Posted 2023-05-12

参考技术A React中使用export导出类可以有两种方法

这种导出方式与export default class classname extends React.class相同

在其他文件中引用时采取如下方式

import classname form path

在其他文件中引用时采用如下方式

import classname1,classname2 from path

import classname1 from path //注意引用一个类时也要加上

在 React ES6 中使用 module.exports

【中文标题】在 React ES6 中使用 module.exports

【英文标题】：Using module.exports in React ES6

【发布时间】：2019-12-09 01:23:53

【问题描述】：

我正在尝试使用 module.exports 创建一个“全局”函数，我可以在我的 React 项目中使用它来使用 Axios 进行 API 调用。

我已经尝试了以下...

import axios from 'axios';

module.exports = 
    fetchApi: function (endPoint) 
        var encodedURI = window.encodeURI('http://localhost:3001/' + endPoint);

        return axios.get(encodeURI)
            .then(function (response) 
                return response.data
            )
    


//call function in other components like this
componentDidMount () 
    fetchApi.fetchApi(this.setState.endPoint)
    .then(function (endPoint) 
        console.log("API endpoint: " + endPoint)
    )

这会返回错误... 'fetchApi' 未定义 no-undef

我知道通常您可以使用 export default 导入和导出组件，但我认为如果使用 module.export 则不需要这样做。

另外，如果我尝试像这样导入...

import fetchApi from '../../../utils/api'

我收到以下错误... 尝试导入错误：“../../../utils/api”不包含默认导出（导入为“fetchApi”）。

任何帮助表示赞赏。谢谢。

编辑：

从'axios'导入axios；

解决方案（编辑）...

api.js

const api = 
    fetchApi: function(endPoint)
        var encodedURI = window.encodeURI('http://localhost:3001/' + endPoint);
        console.log(encodedURI)

        return axios.get(encodedURI)
            .then(function (response) 
                return response.data

            )
    


export default api;

Sites.js

import api from '../../../utils/api'

    //single api call
    componentWillMount = async () => 
        api.fetchApi('sites')
            .then(data => 
                console.log(data);
                this.setState( rows: data.rows, columns: data.columns )
            )
            .then(async () => 
                this.setState( tableRows: this.assemblePosts(), isLoading: false )
            );
    

这使我可以访问以下 api 端点...

http://localhost:3001/sites

感谢您的帮助。

【问题讨论】：

请注意，module.exports 是一个 Node.js 事物（或更准确地说，一个 CommonJS 事物），用于表达从模块导出的内容。我不确定您是否应该在 React/ES6 环境中使用它。见es6 equivalent for module.exports

@HereticMonkey 我一直用它来反应，这都是关于 babel :)

@HereticMonkey 我的朋友，这是该领域的常见做法。 Browserfy、Babel 等都是被广泛接受的工具。

es6 equivalent for module.exports的可能重复

@HereticMonkey 两者都使用很正常，只是不要混在同一个文件中。您的构建脚本或服务器端脚本将使用 CommonJS 模块，而 React 通常在同一个项目中使用 ES6 模块语法。由于某些文件可能是共享的（一些配置），大多数 babel 配置（无论如何都是 ES6+ 需要的）将同时使用这两种语法。

【参考方案1】：

我建议不要混合 require 和 es6 import 语法。坚持使用 es6 语法。 与 es6 语法相同。

import axios from 'axios';

const helpers = 
    fetchApi: function()

    


export default helpers;

用法

import helpers from './helpers';

helpers.fetchApi()

【讨论】：

这个答案更好，因为你不应该混合两种不同风格的导入/导出。它只会让你的代码更难理解。跨代码库的标准很重要。

【参考方案2】：

module.exports 应该导出一个函数，而不是一个对象。

module.exports = function() 

但是，如果您的 api 中有多个函数，则最好使用命名导出：

exports.fetchApi = function() 

此外，您可能希望在此处使用 async 函数和 await，这将有助于清理所有 .then()

【讨论】：

axios get 总是返回一个promise，所以它应该已经是异步的了。

@silencedogood 任何返回承诺的代码都是异步代码。你可以等待它，或者你可以在任何你使用它的地方 .then() 它。

为了await它，它需要是一个async函数......或者，正如你提到的，你可以只使用.then语法。只是偏好问题。