意外的「導出默認」編譯代碼

Question

下面的代碼沒有按照我的預期編譯到export default。我需要將onClick重命名爲其他內容，或將該函數分配給一個變量並導出該變量。任何人都可以提供一些有關此行爲的暗示嗎？由於

export default ({onClick}) => (
    <span 
    onClick={ 
     e => { 
     e.preventDefault(); 
     onClick()} 
    }>123</span> 
) 

編譯的結果（使用https://babeljs.io/repl/）：

"use strict"; 

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 

(function (_ref) { 
    var _onClick = _ref.onClick; 
    return React.createElement(
    "span", 
    { 
     onClick: function onClick(e) { 
     e.preventDefault(); 
     _onClick(); 
     } }, 
    "123" 
); 
}); 

，而我期待：

exports.default = function (_ref) { 
    var _onClick = _ref.onClick; 
    return React.createElement(
    "span", 
    { 
     onClick: function onClick(e) { 
     e.preventDefault(); 
     _onClick(); 
     } }, 
    "123" 
); 
}; 

Answer 1

這的確是一個錯誤。在取消在這個片段中onClick()呼叫打破了出口：

import React from 'react' 

export default ({onClick}) => { 
    return <span onClick={_ => {/* onClick() */}}>123</span> 
} 

提取的JSX代碼塊外的箭頭使得它正確導出，所以你可以在此期間使用此解決方法：

export default ({onClick}) => { 
    const c = _ => { onClick() } 
    return <span onClick={c}>123</span> 
} 

但最好給它一個名字並且export {theName as default}。命名它也會讓你附加propTypes。