予期しない "エクスポートのデフォルト"コンパイル済みコード

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()呼び出しのコメントを解除すると、エクスポートを破る：JSXコードブロックの外にある矢印を抽出

import React from 'react' 

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

あなたはその間にこの回避策を使用することができますので、それが正しく、エクスポートされます：

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

しかし、おそらくそれに名前をつけてexport {theName as default}とする方がいいでしょう。名前を付けると、propTypesを添付することもできます。