出口默認的箭頭功能無法導入

Question

我使用的反應，我在我的代碼是這樣的：

renderDetails.js：

export default renderDetails = (details) => { 
    // function logic removed for brevity 
} 

然後，在同一個文件夾中，我有，我想將其導入另一個源文件，我做這樣的事情：

businessDetails.js：

import renderDetails from './renderDetails'; 
// rest removed for brevity 

但是，我收到一條錯誤消息，指向我的renderDetails.js文件並說​​：「rederDetails未定義」。任何想法可能是什麼問題，以及如何解決它？

Answer 1

的問題是，即使您將組件導出爲默認組件，但您要爲其指定一個未定義的名稱

你可以做

export default (details) => { 

} 

或

const renderDetails = (details) => { 

} 
export default renderDetails; 

還有一兩件事，當你試圖渲染成分，確保他們的名字與Uppercase字符開始。

Answer 2

通過使用命名的出口，你可以從一個單一的文件導出任意數量的功能是這樣的： renderDetails.js

var func1 = function(){ 
//logic 
} 

var func2 =()=>{ 
//logic 
} 

export {func1, func2}; 

，並導入它是這樣的：

import {func1, func2} from './renderDetails';

Answer 3

嘗試這種方式。

functions.jsx

export function renderDetails(details) => { 
    // function logic removed for brevity 
} 

然後導入一樣，

import { renderDetails } from './functions'; 

附： ./適用於兩個文件位於同一名稱空間/文件夾中的情況。