예기치 않은 "기본값으로 내보내기"컴파일 된 코드

Question

다음 코드는 예상대로 export default으로 컴파일되지 않습니다. onClick의 이름을 다른 것으로 바꾸거나 해당 함수를 변수에 할당하고 변수를 내 보내야합니다. 아무도이 동작에 대한 힌트를 줄 수 있습니까? (https://babeljs.io/repl/ 사용) 감사

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

컴파일 결과 :

"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을 첨부 할 수도 있습니다.