Unerwarteter "export default" kompilierter Code

Question

Der folgende Code wurde nicht wie erwartet in export default kompiliert. Ich muss onClick zu etwas anderem umbenennen oder die Funktion einer Variablen zuweisen und die Variable exportieren. Kann jemand einen Hinweis auf dieses Verhalten geben? Dank

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

Das kompilierte Ergebnis (mit 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" 
); 
}); 

während ich erwarte:

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

Answer 1

Es ist ein in der Tat Fehler. Uncommenting den onClick() Aufruf in diesem Snippet den Export bricht:

import React from 'react' 

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

den Pfeil außerhalb des JSX Codeblock Extrahierung macht es richtig ausgeführt werden, so dass Sie diese Abhilfe in der Zwischenzeit nutzen könnten:

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

Aber es ist wahrscheinlich besser, nur einen Namen zu geben und export {theName as default}. Wenn Sie es benennen, können Sie auch propTypes anhängen.