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。

意外的“导出默认”编译代码

1 个答案: